A scroll-triggered animation is an amazing way to engage users visiting your webpage or app. They add storytelling, help in drawing user attention into where you want it, and can be visually stunning and creative.
Scroll-triggered animations are also known as AOS (Animate On Scroll) andm basically, they allow users to you to give life to different elements as they scroll up and down. Generally, scrolling down enables the animation, and scrolling up brings them back to their original “closed” state.
Knowing how to use this can be a key asset in any web designer’s skill set, but there are many things to consider. When to use them and what for? When NOT to use them? How to use these animations? Which are the best libraries? Are they accessible and natural or maybe you’re creating something that can harm the UX? Find answers to these questions in the video below!
More about scroll-triggered animations
The best way to create scroll triggered animations is to find the right libraries for them. Of course, this requires some testing and exploration on the dev’s part, as not all libraries work everywhere, and some of them are designed for specific purposes, but here are some Libraries that are a good starting point.
Vivus.JS: Allows to animate SVGs.
AOS (Animate on Scroll Library): includes options like flip, zoom, fade, and more.
Sal.js: limited but a great starting point for beginners! Lightweight.
GSAP scroll trigger: very complete, stable, and great performance!
About Cassie Evans
Cassie defines herself as a creative developer with a background in graphic design and motion design. She got started with coding back in the days of Myspace and Neopets and is on a mission to make the web more whimsical again. She’s a massive SVG nerd, owner of the world’s most clacky keyboard, and spends her days tinkering on codepen and helping people learn about web animation.
