Toggle CSS Classes When An Element Is Scrolled Into View – onscroll-effect

Category: Animation , Javascript | October 7, 2020
Views Total:954 views
Official Page:Go to website
Last Update:October 7, 2020


Toggle CSS Classes When An Element Is Scrolled Into View – onscroll-effect


The onscroll-effect JavaScript library that automatically adds or remove CSS classes from a given element when you scroll down/up the webpage.

Ideal for animating elements using CSS3 properties when they’re scrolled into view.

How to use it:

Install & download.

$ npm install onscroll-effect --save

Import the onscroll-effect.

import "onscroll-effect";

Or include the ‘onscroll-effect.min.js’ script at the bottom of the webpage.

<script src="/dist/onscroll-effect.es6.min.js"></script>

Add the ‘data-scroll’ attribute to the target element.

<div data-scroll> 
  Element To Animate

By default, the library automatically adds the class ‘.is-outside’ to the element when it is outside of the viewport. So that you can apply your own CSS animations to the element once it is scrolled into view.

.is-outside::before {
  transform: translateY(10em);

You’re allowed to use a custom CSS class instead of  ‘.is-outside’.

<div data-scroll="your own class"> 
  Element To Animate

Determine whether to not to repeat the animation.

<div data-scroll="your own class"
     Element To Animate
<div data-scroll="your own class"
     Element To Animate

Set the distance from the top to trigger the animation.

<div data-scroll="your own class"
     Element To Animate

Remove the CSS class instead when the element is outside of the viewport. Defaults to ‘is-inside’.

<div data-scroll="your own class"
     Element To Animate

Override the default attributes:

<html data-onscroll-effect-custom-prefix="my-prefix">

API methods.

// initialize
// check if is in the viewport
window.onScrollEffect.isInsideViewport( Node );
// check if the animation is repeating
window.onScrollEffect.isRepeating( Node );
// get the count of animation iteration
window.onScrollEffect.repeatingCount( Node );


v1.3.1 (10/07/2020)

  • update

v1.3.0 (10/07/2020)

  • Now you can fill the data-scroll attributes with as many classes as you need, so it’s compatible with any CSS framework. If you leave it empty, the class is-outside will be used by default.
  • Now you can test if an element is isInsideViewport, isRepeating or get repeatingCount.

v1.2.1 (09/14/2020)

  • Updated

v1.2.0 (02/13/2020)

  • Allows to reverse, remove class when outside viewport


  • v1.1.6


  • v1.1.3: bugfix

You Might Be Interested In:

Leave a Reply