Reveal on Scroll

Animate elements as they enter or leave the viewport.

Based on Class Toggles or GSAP Animations you can use ScrollMagic to achieve a reveal effect when an element scrolls into view.

This can either reverse when scrolling past it by supplying a duration (example 1) or it can only happen only on entering the scene by using duration: 0 (default).
It can also be permanent by supplying reverse: false (example 2).

If your animation causes the y position of an element to vary (i.e. scaling or moving), make sure to use a separate trigger. Otherwise the animation will influence the trigger positions. A good practice is to wrap around the animated element and use the wrapper as the trigger.

view source

I will be revealed when scrolled into view and hidden when scrolled past.

view source

I will stay visible once revealed.
(reload to see effect again)

view source

Multiple elements can be looped over and animated as they enter the viewport.

view source






Use GSAP if you want to link the animation directly to scroll progress
or you just need more control over the timeline.

view source