In this blog, we will learn how to use Intersection Observer API to create scrolling animation. For more detail about Intersection Observer API, please refer on this blog

Firstly, as usual, we need to define a raw layout with the content we need to show to the user. In this example. I create a scrollable list contains

Raw layout:

index.html

<div id="list">   
</div>

index.js

for (var i = 0; i < 20; i++) {
    //Create an empty item
    var item = document.createElement('div');
    item.classList.add("item");

    //Create avatar with dynamic url
    var avatar = document.createElement('img');
    avatar.classList.add("avatar");
    let avatarUrl = i % 2 ? "https://www.w3schools.com/w3images/avatar2.png" : "https://www.w3schools.com/w3images/avatar5.png";
    avatar.setAttribute("src", avatarUrl);

    //Create user title
    var user = document.createElement('span');
    user.classList.add("user");
    user.innerText = `User ${i}`

    //Append avatart and user into item
    item.appendChild(avatar);
    item.appendChild(user);

    //Append item to the list
    document.getElementById("list").appendChild(item);
}

style.css

#list {
    height: 100vh;
    overflow: auto;
}
.item {
    padding: 10px 10px;
    border-bottom: 1px solid #323232;
}
.avatar {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 1em;
}

As a result, after finish creating the raw layout, we have something like that:

See the Pen Scroll Animation part 1 by hieu (@phuchieuct93abc) on CodePen.

Adding intersecting class

Secondly, we need to create an observer to detect whether an item is in view or not. Whenever an item is scrolled into and display in the view, we will add a class intersecting for that visible item:

var options = {
    root: document.querySelector('#list'),
    rootMargin: '0px',
    threshold: [0]
}
var callback = function(entries, observer) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('intersecting');
        }
    });
};
var observer = new IntersectionObserver(callback, options);

for (let element of document.getElementsByClassName("item")) {
    observer.observe(element);
}

CSS for intersecting

Finally, we need to defined a class “intersecting” with animation css like this:

.intersecting .user {
    animation: opacity 1s linear;
}

@keyframes scale {
    from {
        transform: scale(0.1);
    }
    to {
        transform: scale(1);
    }
}

@keyframes opacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

The final result we have will look like:

See the Pen Scroll Animation part 2 by hieu (@phuchieuct93abc) on CodePen.

With Intersection Observer API, we can create some attractive animations for items inside the scrollable list

One Comment

  1. Write more, thats all I have to say. Literally, it
    ѕeems aѕ thouɡh yоu relied onn tһe video tօ make yⲟur pоint.
    You obvіously know ԝhat yourre talking about, wһy waste your intelligence оn just postingg videos to your site when уou
    couⅼɗ be giving uss something informative to read?

Leave a Reply

Your email address will not be published.