Modern Animate On Scroll Library For Vanilla JavaScript – Scroll Observer

Preview:

Description:

A modern Animate on Scroll vanilla JavaScript library for animating elements into view on vertical page scrolling.

It is built on top of Intersection Observer API and comes with additional functionality for firing callbacks when elements are in or out of the viewport.

Intersection Observer allows to track elements intersection with the viewport. This is a very powerful addition to animations in the mobile-first world. With it, you can make your website much more engaging and fancy. You can use it to animate elements (like articles) before showing them on screen or create a parallax effect even with only static images atop the page. On top of that, Intersection Observer will allow you to save resources on mobile devices by having only the visible elements rendered on the page while providing a proper scroll experience.

How to use it:

1. Import the Scroll Observer.

import scrollObserver from ./scroll-observer/index.min.js';

2. Initialize the Scroll Observer on the target elements.

<div class="box">
  <h1>Keep Scrolling</h1>
</div>
<div class="box">
  <h1>Keep Scrolling</h1>
</div>
<div class="box">
  <h1>Keep Scrolling</h1>
</div>
...

// single element
scrollObserver('.box');
// multiple elements
scrollObserver(['.article', '.box']);

3. Then, you can apply CSS3 animations to the elements when they’re scrolled into view.

.box.shown {
  /* your styles here */
}

4. Available options.

scrollObserver('.box',{
  once: true,
  onshow: function (entry) {
    console.log("Show ")
  },
  onhide: function (entry) {
    console.log("Hide")
  },
});

5. It also accepts options from Intersection Observer API.

scrollObserver('.box',{
  once: true,
  onshow: function (entry) {
    console.log("Show ")
  },
  onhide: function (entry) {
    console.log("Hide")
  },
  root : document.querySelector('.article'),
  rootMargin : '20px',
  threshold: [0, 0.25, 0.5, 0.75, 1],
  // ...
});

Changelog:

v1.0.3 (12/17/2022)

• Fixed subsequence elements were ignored when the options argument had once : true property.