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.
I will be revealed when scrolled into view and hidden when scrolled past.
view sourceI will stay visible once revealed.
(reload to see effect again)
Multiple elements can be looped over and animated as they enter the viewport.
view source1
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.