Animate with IntersectionObserver!

So the job was to animate an element when they get on the page. The people on the internet had the same issue so they made the Intersection Observer API. Thanks!

Lets check it out. Just scroll through this page and check out the fading effect on the cards. And then scroll down to the explanation.

The cards

Card title no 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 8

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 9

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 10

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 11

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 12

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 13

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 14

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 15

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 16

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 17

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 18

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 19

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 20

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 21

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 22

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 23

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Card title no 24

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae cupiditate eaque et harum impedit ipsam laboriosam maxime nesciunt obcaecati, sint velit! Dignissimos officiis reiciendis repellat temporibus unde voluptatem voluptatum.

Explanation

It's quite simple, the intersection observer has some calls to check if an item intersects with the element you want. On this example i will observe on the window. So no argument is needed. Lets just code.

The javascript.

function callback(entries) {
  for (var i in entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('in-view');
      } else {
        entry.target.classList.remove('in-view');
      }
    });
  }
}

function initObserver() {
  var observer = new IntersectionObserver(callback);
  var items = document.querySelectorAll('.js-observe');

  for (var i in items) {
    if (!items.hasOwnProperty(i)) {
      continue;
    }

    observer.observe(items[i]);
  }
}

if (window.IntersectionObserver) {
  initObserver();
} else {
  console.log("IntersectionObserver not supported.");
}

Have a callback for the observer
Setup the observer for the elements
Check if the browser supports IntersectionObserver and initialize

Here we use the isIntersecting if the element is intersecting, with the window. If it is we add a class in-view to the intersecting elements. For the observer we use a class js-observe. And to that nodelist we add let the IntersectionObserver observe. When an elements gets on screen the element now gets a in-view class, wich we will animate. And that's it. So simple. Now for some animation, css to the rescue.

Just note that the intersection observer is not supported jet in all browsers, check that on caniuse. But there is an IntersectionObserver polyfill which supports major browsers.

The css

.in-view {
    animation: animate-in-view .6s ease-out forwards;
}

@keyframes animate-in-view {
    0% {
        transform: translate(0, 20px) scale(1.1);
        opacity: 0;
    }
    35% {
        transform: translate(0, 20px) scale(1.1);
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

I did add a small delay on the animation when the elements get on the screen. But other than that just add it and enjoy the animations.