How to Create CSS Animations on Scroll

Download Now: 25 Free HTML & CSS Hacks
Darrielle Evans
Darrielle Evans

Updated:

Published:

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.

person scrolling on phone triggering a css animation

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]

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

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

css animation are activated on scroll bringing together hand drawings of people in a gallery wearing luxury clothes

Image Source

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

css animation are activated on scroll taking the viewer through a timeline of the brand’s accomplishments in 2018

Image Source

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

css animation are activated on scroll taking the viewer through lush reservoir where Fiji bottled water comes from

Image Source

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."

how to create css animation on scroll, html code

Image Source

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.

how to create css animation on scroll, css code

Image Source

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.

how to create css animation on scroll, intersect object

Image Source

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.

how to create css animation on scroll, intersect object options css

Image Source

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.

how to create css animation on scroll, intersect object callbacks css

Image Source

Next, create the intersection observer by calling its constructor. You will then pass the callback function and the options object to the constructor.

how to create css animation on scroll, observer javascript

Image Source

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.

how to create css animation on scroll, element javascript

Image Source

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.

coding-hacks

Topics: CSS Animation

Related Articles

Tangible tips and coding templates from experts to help you code better and faster.

    CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

    START FREE OR GET A DEMO