Perform Actions On Page Scroll – scroll-out

Preview:

Description:

A lightweight, cross-platform, progressively enhanced JavaScript scroll animation library for the web.

The scroll-out library can be used to animate given elements by toggling and altering attributes and CSS classes on vertical page scrolling.

Dead simple to use and highly customizable.

Basic usage:

Install the scroll-out via NPM.

# NPM
$ npm install scroll-out --save

Import the ScrollOut from the package.

import ScrollOut from "scroll-out";

Or load the compiled version of the scroll-out library in the document.

<script src="/scroll-out.min.js"></script>

Initialize the library and you’re ready to go.

ScrollOut({
  // options here
});

Add the data-scroll attribute to the element you want to animate on scroll.

<div data-scroll>
  Element To Animate
</div>

Animate the element using CSS/CSS3.

[data-scroll] {
  /* CSS Here */
}
[data-scroll="in"] {
  /* CSS Here */
}
[data-scroll="out"] {
  /* CSS Here */
}

Available configuration options.

ScrollOut({
  // If true, all CSS Variables will be added to the scrolling element and all targets. 
  // If false, only the [data-scroll] property will be modified on targets. For more control, see CSS Props Options
  cssProps: true,
  // The distance in pixels from the top to trigger the animation
  offset: 0,
  // Decides whether to execute only once
  once: false,
  // The root element to use when resolving targets
  scope: documentElement,
  // An optional list of elements or a css selector
  targets: '[data-scroll]',
  // The ratio of the element that must be visible before it is marked as visible.
  threshold: .2
  
});

Event handlers.

ScrollOut({
  onShown: function(element, ctx, scrollingElement) {
    /* shown */
  },
  
  onHidden: function(element, ctx, scrollingElement) {
    /* hidden */
  },
  onChange: function(element, ctx, scrollingElement) {
    /* changes visibility */
  }
});

Changelog:

v2.2.8 (02/24/2020)

• Update