Are you building a web page and stuck on how to make it a better experience for your reader? If you're looking to add extra interactivity to your web page, CSS animations on scroll will do the trick.
Of course, you can add pictures and videos to help bring your vision to life. However, CSS animations can add additional movement and hold your visitors’ attention. Best of all, they're relatively easy to create.
![Download Now: 25 HTML & CSS Hacks [Free Guide]](https://no-cache.hubspot.com/cta/default/53/848be230-f06a-420e-9a24-82b45fe61632.png)
In this post, you’ll learn what CSS animations on scroll are, how to animate CSS on scroll, and usable examples. With just a few lines of code, you can have some great-looking animations up and running in no time. Let's get started!
Table of Contents
- What are CSS animations on scroll?
- CSS on Scroll in Action
- How to Animate CSS on Scroll
What are CSS animations on scroll?
Imagine you want to catch the reader's attention as they scroll up and down your web page — like animated text, changing the color of things, or bouncing elements. With CSS animations, you can use smooth transitions between states, create complex multi-step animations, and even animate SVG elements — all without using complex JavaScript code. You can activate these animations by creating CSS animations on scroll.
As readers scroll up and down the web page, the animation is triggered once the element comes into view. The sudden movement of the elements will keep the reader engaged. This is because our eyes are attracted to changes in objects’ behavior. Just a little bit of movement and change can bring your page to life.
CSS on Scroll in Action
Now that you know what CSS animation can do, let’s check out live web pages that use scroll animations.
Gucci Hallucination
Luxury fashion brand Gucci employs scrolling animations throughout its web page. The animations bring their art to life. As you scroll up and down the web page, your eyes will certainly be focused on the animations.
Year In Review
Digital and Motion creates bold visuals using CSS animations on scroll. Check out their visual time capsule for 2018. As you scroll up and down, you travel through their year of memories.
Fiji Water
The water brand Fiji creates visuals of nature as the theme for its website. As you scroll up and down, you can see the clouds come to life. You can also see the raindrops fall from what appears to be the sky. We love how this animation aligns with the company’s branding.
How to Animate CSS on Scroll
Now that you know the benefits of using CSS scroll animations, let’s create some.
1. Start with HTML code.
We’ll begin with some HTML to create your CSS animations on scroll. Create a simple web page and give the elements class names. In the example below, you’ll see four divs given the same class name, "fade-in."
2. Create the CSS.
Next, you’ll create the CSS. This is where you’ll control your animations and scroll effects. In this example, the active class is added to the image as it scrolls into the viewport. The transform attribute gives your web page a more dynamic feeling while the translation attribute dictates the amount of time it takes to load.
Finally, you’ll create an intersection observer using a few lines of JavaScript.
3. Build an intersect observer using JavaScript.
The first step is to grab the elements using querySelectorAll.
Next, create your options object. Set the root to null, which sets the viewport to its document. Then, set the root margin to 0px, which controls the sides of the root’s bounding box. Use the threshold to determine the element’s trigger point based on the element’s visibility.
In the example below, the element’s trigger is set for when the element is 40% visible.
The next step is to create the callback function. The callback function takes the entries as a parameter. You can use the forEach method to iterate through the list of entries.
The callback function determines if the element is currently intersecting with the root and returning that particular element.
Next, create the intersection observer by calling its constructor. You will then pass the callback function and the options object to the constructor.
The final step is to select the elements to be observed. If you have multiple elements, you simplify your code by giving them a common class name and using the forEach method to iterate through each element as it enters or leaves the viewport.
That’s it! Check out the complete example here.
Bring Your Website to Life
As you can see, using CSS animations on scroll offers an easy and efficient way to add motion and animation to your website or application. You can create beautiful, eye-catching animations with CSS scroll animations that respond to user actions or scroll events.
Plus, CSS is much easier to work with than JavaScript — so if you’re looking for a quick way to add life to your web project without writing code from scratch, CSS is the way to go! Try it out today.
