# 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).

Note:
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

1

2

3

4

5

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

view source