Modern Animate On Scroll Library For Vanilla JavaScript – Scroll Observer

Category: Animation , Javascript | September 20, 2022
Author:codeAbinash
Views Total:0 views
Official Page:Go to website
Last Update:September 20, 2022
License:MIT

Preview:

Modern Animate On Scroll Library For Vanilla JavaScript – Scroll Observer

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],
  // ...
});

You Might Be Interested In:


Leave a Reply