Animate on scroll

[Federiko9811]

Using this library I could not trigger the animation of the components when I scroll the page to that position. The effect I would like to achieve is the one on the page of the site itself in the section "Ships with the most commonly used premade animations." which is animated whenever it appears within the screen.

[dev-pacito]

This would be great! Following

[Leo0114]

ward

[heidkaemper]

This package only extends the animation utilities of Tailwind CSS. If animations should only run when an element enters the browser viewport, something like an intersection observer is neccesary.

On the configurator page we use Alpine.js with it's Intersect Plugin, which works nicely: https://alpinejs.dev/plugins/intersect

If you prefer Vanilla JS you could use my Tailwind CSS Intersection Plugin: https://github.com/heidkaemper/tailwindcss-intersect

There are various ways to achieve this. But right now there is some JavaScript neccesary.

(In the future this may also be possible with scroll-driven animations instead of JS. But by now the browser support for this is a bit weak.)

[ekayx]

This package only extends the animation utilities of Tailwind CSS. If animations should only run when an element enters the browser viewport, something like an intersection observer is neccesary.

On the configurator page we use Alpine.js with it's Intersect Plugin, which works nicely: https://alpinejs.dev/plugins/intersect

If you prefer Vanilla JS you could use my Tailwind CSS Intersection Plugin: https://github.com/heidkaemper/tailwindcss-intersect

There are various ways to achieve this. But right now there is some JavaScript neccesary.

(In the future this may also be possible with scroll-driven animations instead of JS. But by now the browser support for this is a bit weak.)

Would be great to explain that in the readme and link to the alpinejs solution.