DEV Community: Nick Ciliak

How to create scroll animations without a library

Nick Ciliak — Sat, 20 Feb 2021 00:00:00 +0000

There are tons of scroll animation libraries out there (I've even written a guide to the best ones) so it might seem like you have to use one if you want to implement scroll animations. But is it possible to create scroll-based animations without using a third-party JavaScript library?

Yes: adding scroll-based animations to your page is totally possible without using a library.

By using a library, you can often save time when implementing your animations. You can also take advantage of performance optimizations that are built into the library. However, when you create them from scratch, you have unlimited flexibility to create the animations exactly the way you want them. Plus, when you build from scratch, you won't be including any unnecessary code that you might be if you used a library.

If you are implementing a page with a lot of scroll animations, you want to use a library. You'll not only save time, but you'll be able to reuse a lot more code and benefit from the performance optimizations a library can provide.

When to implement scroll animations from scratch

If you only need to add a few animations, you're more likely to be a contender to build from scratch, without using a library.

If page speed is a big concern for your project, it might be better to build from scratch, because using a scroll animation library will add additional size to your page. However, there are plenty of small libraries out there, and if you end up reimplementing most of the features that the library provides anyway, you should consider just using the library. If you can't find a small enough library that has only the exact features that you need, then you could just build it from scratch.

Additionally, any time you use a third-party JavaScript library, you add another dependency to your project that is likely not fully under your control. This can be an issue as your project ages: if the package becomes unsupported and bug-ridden in the future, it can cause your project to break as well. If something like this is a concern for your project, you might be better off implementing your animation from scratch.

Here are a few examples of how to implement scroll animations without using a library.

Scroll-triggered animations without a library

If you want an element to animate in some way when it enters or exits the viewport, you can use Intersection Observer to add or remove a class with a CSS animation or transition.

Here's an example:

// Create the observer
var observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
      if (entry.isIntersecting) {
      // Add the CSS class that has your animation
      entry.target.classList.add('fade-in');
      return;
    }

    entry.target.classList.remove('fade-in');
  })
});

// Observe the element
var element = document.getElementById('my-element');
observer.observe(element);

If you only want the animation to happen once, instead of every time the element is scrolled in and out of the viewport, you can skip removing the class and call observer.unobserve(entry.target) to stop observing the element after the class has been added.

Scroll-bound animations without a library

If you want to create a scroll-bound animation without a library, you can use a scroll event listener with a callback function that transforms your element based on the distance the page has been scrolled.

Every time the user scrolls the page, the scroll event will be fired. In the scroll event callback, you can check the scroll distance and then change an element's style.

As the user continues to scroll, the element will continue to change, giving the illusion of motion.

Here's an example where an element's opacity is bound to the scroll position:

window.addEventListener('scroll', function() {
    var element = document.getElementById('my-element');
    var distanceToTop = window.pageYOffset + element.getBoundingClientRect().top;
    var elementHeight = element.offsetHeight;
    var scrollTop = document.documentElement.scrollTop;

    var opacity = 1;

    if (scrollTop > distanceToTop) {
        opacity = 1 - (scrollTop - distanceToTop) / elementHeight;
    }

    if (opacity >= 0) {
        element.style.opacity = opacity;
    }
});

For a full demo and explanation of this technique, check out my tutorial for how to fade an element out on scroll.

The best scroll-based animation libraries

Nick Ciliak — Sat, 20 Feb 2021 00:00:00 +0000

While scroll-based animations are all based on the same concepts, there are actually many different tools you can use to implement them.

The first, and most obvious, is by coding them from scratch. This is always an option, but not what we're going to discuss in this post. If you're here, you already know that using a library to implement scroll animations can save you lots of time.

There are lots of libraries out there to help with this (I've analyzed over 30 in my guide to scroll-triggered animation libraries). So which scroll-based animation library is the best?

What to consider when choosing a scroll animation library

There are lots of things to consider when choosing a scroll animation library to use in your project. Here's some of them:

Scroll-triggered or scroll-bound support
Tweening support
Scroll-pinning support
Browser support
Speed and performance
Customization
Package size
License and price

I've spent hours researching, collecting data, and testing the scroll-based animation libraries available today (there are a ton of them). Some are very similar, and some are quite different from each other.

Really the most important thing to consider is going to be whether or not the library offers support for the type of scroll animation that you need to build. After all, that's why you're using the library in the first place: to accomplish a specific task.

You also have to consider the library's license: is it free for commercial use? (That's the most common question!)

If you don't have the budget, it's important to choose a library that has the MIT license (or similar) if you're working on a commercial project. If it's a personal project that you're not profiting off of (for example, selling work to a client) then in general you should be covered under most licenses. But it's important to always double check this.

Another important aspect to consider is the size of the library. Including a library means more JavaScript is on your page, which impacts the time it takes for your page to load. Some libraries are under 2kb in size and some are over 30kb. You don't want to include a hefty package if you aren't going to utilize all of it. That's why it's important to make sure you understand which features of a library you actually need to use.

Flexibility is an important and often overlooked attribute when choosing a scroll animation library. Certain libraries may allow you to implement the same effect, but not all of them allow you to customize them to your exact needs, as well as provide events to hook into if you need to do additional work.

So, considering all of the different options and attributes, which scroll-based animation library is the best?

Best library for simple scroll animations

My pick for the best library for creating simple scroll-triggered animations is Sal.js. If you're new to web development or just need a simple and quick way to add a fade-in animation to your page, this is the library you want. It's easy enough to drop in to a project but offers options for customization.

Pros of Sal.js: Sal.js is very beginner-friendly and contains 10+ built-in animations for you to use right away. It's also pretty customizable: you can use your own CSS animations with it as well as easily enable and disable animations and hook into in/out events. It is only 1.3kb when minified and gzipped, which is pretty darn tiny! It's licensed under the MIT License, so it's free for commercial and personal use.

Cons of Sal.js: Sal.js animations are triggered based on how much of an element is visible in the viewport. While it offers some customization of this, it's more difficult to fully customize a scene. Also, it can be buggy in some browsers when using repeated animations.

When you should use Sal.js: Use this library if you need to create simple scroll-triggered animations using CSS classes.

Best library for advanced scroll animations

My pick for the best library for creating advanced scroll-triggered animations is GSAP ScrollTrigger. GSAP is a JavaScript animation library that offers a number of additional plugins, including ScrollTrigger (this means that you can't just use ScrollTrigger on its own, you also need to use GSAP). ScrollTrigger is the all-in-one library: you can create any scroll-based animation, including scroll-triggered animations, scroll-bound animations, and scroll-pinning. ScrollTrigger is free to use for personal projects or client projects with a one-time fee but you'll need to buy a license to use it in any commercial projects where end users are charged a usage fee.

Pros of GSAP ScrollTrigger: With ScrollTrigger, you can create pretty much any scroll animation effect you can think of with it right out of the box, plus it's super customizable. It's perfect for creating entire scenes where you need to control multiple keyframe animations. In addition, you can do all of your work in JavaScript, without having to coordinate adding and removing CSS classes to implement keyframe animations. Also, ScrollTrigger and GSAP are highly-focused on performance, compatibility, and browser support, which means you'll spend less time spend debugging and optimizing your animations.

Cons of GSAP ScrollTrigger: While they offer lots of demos and great API documentation, ScrollTrigger is not as beginner-friendly as other scroll animation libraries out there (mostly because you also need to learn to use GSAP itself to implement ScrollTrigger. If you already have GSAP experience, it's not as difficult). It's considerably larger than other libraries as well: if you include GSAP and ScrollTrigger in your project, you'll add around 30kb minified and gzipped to your project, which puts it on the larger side for a scroll animation libraries.

When you should use GSAP ScrollTrigger: Use ScrollTrigger if you need to create a highly-interactive page with multiple complex scroll-bound animations.

Best library for every other use case

There is no overall "best" option when it comes to scroll animation libraries. There is only the best for your use case! While I've picked Sal.js and ScrollTrigger to represent the best libraies for simple and advanced scroll-based animations, there are many more that represent the inbetween.

I wrote a guide to the top 10 libraries used to create scroll-triggered animations. It compares and contrasts each library based on the criteria above so you can choose the exact right one for your needs and skill level. It even has a handy comparison chart for quick reference.

The three concepts behind every scroll animation

Nick Ciliak — Sat, 13 Feb 2021 00:00:00 +0000

Scroll-based animations can be visually complex, but behind all of them are just three basic concepts. You can create any scroll animation if you understand these three things and how to implement them.

The three concepts are: triggers, pinning, and tweening. Most scroll animations rely on triggers. Some rely on triggers only, and others rely on all three. But if you understand all three, you can create any scroll animation effect.

Let’s break each concept down, then see how they apply to real-world examples.

1. Triggers

A trigger is an event that initiates a scroll animation or effect. Here are the most common triggers used in scroll animations:

an element enters the viewport
an element reaches the center of the viewport
an element leaves the viewport

When a trigger is detected, we can apply any transition, animation, or effect to an element. In many cases, this is as simple as adding or removing a class from an element. In other cases, it can tell an element to start tweening.

Most triggers are based on the element being animated, but they don't have to be. For example, a trigger can also be the user reaching the end of a page or scrolling to the top of a page. Or it could be when two elements overlap or when the user changes scroll direction.

Is scrolling itself a trigger? Not really. Scrolling is implicit in scroll-based animations, so scrolling itself is not a trigger. For our purposes, a trigger is a specific occurrence related to scrolling, not the act of scrolling itself.

2. Pinning

Pinning is a scroll-triggered effect where a freely scrolling element becomes fixed at a certain scroll position. It remains fixed indefinitely or until a specified point. This effect is often combined with animations, but by definition does not represent an animated effect.

Pinning is important to scroll animations because it allows us to manipulate time as a user scrolls. For example, an element can enter the viewport by scrolling and be pinned as other elements continue to scroll. The timeline of one element is altered while the rest are not. This contrast gives the opportunity to create interest, draw attention, and tell a story.

3. Tweening

Tweening is an animation concept where frames are generated from the start point to the end point of an animation and played in succession to create the illusion of motion. The frames are generated by interpolating interstitial values based on a duration input.

For scroll-triggered animations, where an animation is played independently of the scroll position, the duration of the animation is a length of time. For example, a fade-in animation that takes 3 seconds. The 3 seconds is fixed, so the browser can generate the frames for us without any additional user input. This is commonly done with a CSS animation or transition.

For a scroll-bound animation, where the animation state is bound to the user's scroll position, the duration of the animation is a distance. This means that the actual animation can be fast or slow depending on the speed the user scrolls. For example, a fade-in animation that occurs over the scroll-distance of 300px can take 100ms or 1s. It all depends on the speed of scrolling. That means that for scroll-bound animations, inbetween frames must be generated on demand based on the user's scroll position.

Putting it all together

Using triggers, pinning, and tweening, you can create any scroll-based animation or effect. Let's take a look at two real-world examples and see how each concept manifests in them.

The first example is sketch.com. This page uses two of the three concepts: triggers and tweening. Some elements on the page fade into view (and move up slightly) when they are scrolled into the viewport. This is an example of a trigger.

It also uses tweening: the section that says "Open up the design process" has an illustration that transforms as you scroll. The more you scroll, the more the animation proceeds.

Another example of these concepts is stories.google. This page has a great example of pinning: notice that when you scroll, the phone in the center of the page becomes fixed as the rest of the page continues to scroll around it. It stays pinned to draw focus for a bit, then it unpins and continues to scroll offscreen.

This page also uses triggers (elements fade in when a point is reached, the background color changes when a point is reached) and tweening (the phone changes in scale as you scroll and the screens at the bottom are translated at different speeds).

As you can see, these concepts can be found in scroll animations all over the web. While the results can be very different and imaginative, the three concepts of triggers, pinning, and tweening will come up again and again. Once you learn to implement each of them, you can create any scroll animation you want.

How to make an element fade out on scroll

Nick Ciliak — Sat, 23 Jan 2021 00:00:00 +0000

Fading an element out on scroll is a subtle effect that helps draw attention away from what is exiting the viewport and towards whatever is below.

It works like this: as the user scrolls down the page, when the given element reaches the top of the viewport, it begins to fade out depending on how much the user has scrolled. By the time the element exits the viewport, it has completely faded out.

Take a look at this demo.

To make the effect, we need the trigger and action. The trigger is the user scrolling. When a user scrolls, the scroll event is fired. We can then call a function, our action. The action in this case is updating the opacity of the element. The more the user scrolls, the less opaque the element should become.

Here's how it works. Start with adding a scroll event listener and a handler method:

function scrollHandler() {
    // this runs every time the user scrolls
}

window.addEventListener('scroll', scrollHandler);

Now whenever the user scrolls, the scrollHandler function will be called. (Note: it will run a lot if the user is continuously scrolling!)

Now we need to update the element's opacity based on how much the user has scrolled. This will involve a calculation using the distance scrolled, the distance from the element to the top of the page (if there is any), and the element's height.

var distanceToTop = window.pageYOffset + element.getBoundingClientRect().top;

We need the distance from the top of the element to the top of the page (note: the top of the page, not the top of the viewport) because we want to start fading out when the user has scrolled that amount of distance. If the user has scrolled that amount, it means the user has scrolled enough so that the element is just at the top of the viewport.

var elementHeight = element.offsetHeight;

Then we need the height of the element. We want the element to fade out evenly from the start of its exit to the end of its exit. To do that, we need to compare the amount scrolled to the height of the element.

var scrollTop = document.documentElement.scrollTop;

Finally, we need the amount that the user has scrolled. This is the magic number that powers our calculations.

Here's the calculation. If the scrollTop > distanceToTop, that means we should start fading out. The opacity should be 1 minus the difference of the amount we've scrolled and the distance of the element to the top of the page, divided by the element's height. As the scrollTop or amount scrolled increases, this result will increase. Since we're subtracting it from 1, the more it increases, the closer to 0 the final opacity comes.

var opacity = 1;

if (scrollTop > distanceToTop) {
  opacity = 1 - (scrollTop - distanceToTop) / elementHeight;
}

If the opacity is not greater than or equal to 0, we don't need to set it on the element. (A negative opacity value will do nothing.)

Here's what it looks like all together:

function scrollHandler() {
  var element = document.getElementById('header');

  var distanceToTop = window.pageYOffset + element.getBoundingClientRect().top;
  var elementHeight = element.offsetHeight;
    var scrollTop = document.documentElement.scrollTop;

    var opacity = 1;

    if (scrollTop > distanceToTop) {
        opacity = 1 - (scrollTop - distanceToTop) / elementHeight;
    }

    if (opacity >= 0) {
        element.style.opacity = opacity;
    }}

window.addEventListener('scroll', scrollHandler);

Element fade out on scroll code example

Here's what the full code looks like for this demo. Please note, using the scroll event to perform DOM updates in this way can be resource-intensive and should be used sparingly. If you need to create this effect on one or two elements on the page, you'll be fine. But if you have to do it to many, it's likely you'll want to make some additional optimizations.

var header = document.getElementById('header');

function fadeOutOnScroll(element) {
    if (!element) {
        return;
    }

    var distanceToTop = window.pageYOffset + element.getBoundingClientRect().top;
    var elementHeight = element.offsetHeight;
    var scrollTop = document.documentElement.scrollTop;

    var opacity = 1;

    if (scrollTop > distanceToTop) {
        opacity = 1 - (scrollTop - distanceToTop) / elementHeight;
    }

    if (opacity >= 0) {
        element.style.opacity = opacity;
    }
}

function scrollHandler() {
    fadeOutOnScroll(header);
}

window.addEventListener('scroll', scrollHandler);

Feel free to take a look at the CodePen demo.