Animate on Scroll Examples

Scroll down to see animations trigger as elements enter the viewport.

Fade Animations

Fade In

Fade From Top

Fade From Bottom

Directional Slides

Slide From Left

Slide From Right

Zoom & Spin

Zoom In

Spin In

Staggered Grid

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Animate Once vs Repeat

Animate Once

Scroll past and back - won't animate again

Repeat Animation

Scroll past and back - will animate again!