Perform Actions On Page Scroll – scroll-out

Category: Animation , Javascript , Recommended | February 24, 2020
Views Total:1,554 views
Official Page:Go to website
Last Update:February 24, 2020


Perform Actions On Page Scroll – scroll-out


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 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.

  // options here

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

<div data-scroll>
  Element To Animate

Animate the element using CSS/CSS3.

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

Available configuration options.

  // 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.

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


v2.2.8 (02/24/2020)

  • Update

You Might Be Interested In:

Leave a Reply