Add instructions for NPM package in the Readme, and clarify its usage
I'm glad this is published to NPM. However, I thought there's no NPM package yet until I searched the issues and found the linked issue.
Please add the npm install command and a link to the registry in the Usage section in Readme.
Also add the instructions how to enable this polyfill after importing it as an NPM package. It doesn't just start working immediately without this:
<script>
import 'scroll-timeline-polyfill/dist/scroll-timeline.js'
</script>
@souporserious @flackr
Media query limitation of the polyfill:
I learnt that wrapping my CSS in a @media (prefers-reduced-motion: no-preference) block breaks the polyfill.
Please also mention in Readme, the problem with prefers-reduced-motion and the workaround in this comment, if it's not fixable currently.
Additional limitations of the polyfill:
- Classes must be applied statically. Dynamically applied classes won't work. (This prevents me from using something like Alpine.js to apply parallax effect dynamically.)
- Tailwind
@utilityclasses will not work. You must define it as a regular CSS class for the polyfill to pick it up and apply its magic. (This prevents me from taking advantage of the benefits a Tailwind utility class offers, such as using breakpoints.)
Dynamic application and Tailwind utility classes work correctly in the native implementation in Chrome, but it will fail in other browsers as of now.