Scroll down to see animations trigger as elements enter the viewport
Simple fade effects when elements enter the viewport.
data-animate="fade-in"
data-animate="fade-from-top" data-animate-delay="100"
data-animate="fade-from-bottom" data-animate-delay="200"
Elements slide in from different directions.
data-animate="fade-from-left"
data-animate="fade-from-right" data-animate-delay="150"
data-animate="slide-in-right" data-animate-delay="300"
Dynamic animations with scaling and rotation.
data-animate="fade-zoom-in" data-animate-duration="800"
data-animate="spin-in" data-animate-duration="700"
Multiple elements with incremental delays create a cascading effect.
No delay
100ms delay
200ms delay
300ms delay
400ms delay
500ms delay
Control whether animations trigger once or every time the element enters the viewport.
data-animate-once="true"
Scroll past this, then scroll back - it won't animate again
data-animate-once="false"
Scroll past this, then scroll back - it will animate again!
Fine-tune animation speed for perfect timing.
Quick and snappy
Balanced timing
Smooth and dramatic
Specially designed for cards with subtle upward float, gentle scale, and blur-to-focus effect with elastic easing for a "settling into place" feel.
data-animate="card-reveal"
Notice the smooth scale and blur-to-focus effect
data-animate-delay="150"
Staggered for cascading effect
data-animate-delay="300"
Perfect for feature sections