Tips & tricks

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

21 Comments

  8. 실제돈버는게임

    Have you ever thought about including a little bit more than just your articles?

    I mean, what you say is important and all. But just imagine if you added some great pictures or video clips to give
    your posts more, “pop”! Your content is excellent but with
    pics and clips, this website could certainly be one of the most beneficial in its niche.
    Excellent blog!

  16. buy avodart online

    Simply want to say your article is as astounding.
    The clarity for your put up is simply excellent and i can assume you
    are a professional on this subject. Fine along with your permission allow me to snatch your feed
    to stay up to date with impending post. Thank you one million and please carry on the
    rewarding work.

Leave a Reply