Scroll Triggers

A tiny, dependency-less javascript library to add classes as elements scroll into viewport

Download from GitHub

Features

A tiny, dependency-less javascript library to add classes as elements scroll into viewport.

A good example of what you can achive with scroll-triggers is TOC, which is being used on the floating navigation of this page, to highlight the link that match the current section in view.

Also, it's being used to fire the animations once you enter each section. Other usage examples are:

  • Add a class when an element comes into view (great for animations)
  • Set an image when an element comes into view (great for lazy loading)
  • Set src property when an element comes into view (great for lazy loading)
  • Set the width of an element based on scroll % (great for scroll progress bars)
  • API for both HTML and JavaScript

Installation

Install it via npm:

npm install 'scroll-triggers'

Usage

HTML Setup
<!-- Add class when element is in view -->
<div data-scroll data-scroll-class="class-to-add"></div>

<!-- Add class when another element is in view and remove when it gets to another element
<div data-scroll data-scroll-class="class-to-add" data-scroll-start=".some .selector" data-scroll-end=".some .lower .selector"></div>
JavaScript Setup
import scrollTriggers from 'scroll-triggers';

// Optional, you can configure it with inline declaration data-scroll-*
scrollTriggers([
  {
    el: '.some-selector',
    start: '.selector',
    end: '.selector',
    className: 'class-to-add',
    image: 'image/path.jpg',
    src: 'http://url-to-resource.com',
    srcSet: 'http://url-to-resource.com',
    position: 'top|middle|bottom',
    positionEnd: 'auto|top|middle|bottom',
    offset: -20,
    progress: true|false,
    once: true|false,
    fixed: true|false,
    inView: (el, options) => {},
    outOfView: (el, options) => {}
  }
]);

Options

Options are set via custom properties:

Name Type Description
class {string} Class to be added/removed when element is in view
start {string|Element|NodeList} CSS Selector Add class when the specified element is in view
end {string|Element|NodeList} CSS Selector Removes class when the specified element is in view
position {string = "bottom"} "top|middle|bottom" Add class at when element hits the specified position of page
positionEnd {string = "bottom"} "auto|top|middle|bottom" Removes class when specified element hits the specified position of page
offset {number} Controls the distance (negative or positive) between the top border of the element and the top border of the window. This is useful to fine tune when a class is added.
image {string} Path to image Set an image when an element comes into view, if the element is an it will set it as the src, otherwise it will be set as background-image
src {string} Path to resource Set the src property when an element comes into view
srcSet {string} Path to resource Set the srcset property when an element comes into view
progress {boolean} Set the width of an element based on scroll %
once {boolean} Whether scroll-triggers should be executed once or not
inView {function} Needed for fixed (position: fixed) elements
outOfView {boolean} Callback executed when element is in view
fixed {boolean} Callback executed when element is out view
<!DOCTYPE HTML>
<html>
  <head>
    <title>Scroll Triggers Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="progress" data-scroll data-scroll-progress></div>
    <div data-scroll data-scroll-class="visible" data-scroll-position="top">Should turn green</div>
    <p>Auctor vivamus ac et condimentum himenaeos pretium parturient tincidunt sociosqu inceptos ullamcorper vitae placerat nisi facilisis odio molestie odio turpis venenatis. Nam a cras at ac nam vestibulum at adipiscing consectetur vestibulum aliquet penatibus diam potenti lacus porta. Potenti a potenti at dignissim a semper rhoncus consectetur ad vitae congue posuere a id. Dictumst donec vestibulum lectus quis in neque suspendisse urna nec mattis semper vestibulum justo a faucibus. Posuere rhoncus ad pulvinar a eget dui volutpat aliquam quam platea purus elit lorem ante. </p>
    <p>Rutrum aliquam vestibulum parturient eleifend vestibulum a a integer mollis cubilia commodo fermentum himenaeos a inceptos adipiscing a sapien ad. Ac id praesent hendrerit donec ad erat elit ullamcorper condimentum a nisi hac dui dui nec lacinia morbi nam potenti proin auctor parturient est cubilia. Augue parturient velit vehicula fermentum erat eu suspendisse parturient euismod a vulputate potenti proin a donec ultricies consectetur consectetur fringilla ullamcorper a nunc ridiculus nec. Laoreet ligula vestibulum parturient feugiat scelerisque ridiculus in nisl vestibulum justo scelerisque a a ut vitae scelerisque quis. </p>
    <p>Vestibulum malesuada nascetur a a porta sociosqu suspendisse imperdiet enim interdum a vitae consectetur porta luctus mi magna commodo eu nisl. Natoque scelerisque lacus rutrum accumsan ac urna quis in nisl ullamcorper semper risus volutpat morbi platea a a a a aenean massa semper praesent a curae parturient suspendisse elit. Ante ac a in nisl commodo semper odio volutpat magna parturient eu mauris nisi malesuada litora parturient feugiat aptent. Id erat eu dapibus vivamus bibendum a litora consectetur vitae suspendisse a etiam varius posuere dis id nunc fusce habitant sodales tincidunt conubia in. Ornare nec massa mus a vivamus mi ridiculus a adipiscing eleifend vestibulum auctor a lacinia orci dictumst justo a adipiscing. </p>
    <p>Quis hendrerit maecenas vestibulum facilisis ullamcorper ipsum natoque a est a adipiscing scelerisque eu vestibulum sapien eu consectetur curae. Tellus donec a aliquam malesuada dapibus mi condimentum metus duis lectus dictumst auctor proin duis. Class parturient pretium consectetur lorem convallis turpis adipiscing erat parturient fusce consectetur consectetur a ac adipiscing ultrices at. Imperdiet eu et imperdiet adipiscing vehicula a ullamcorper per id conubia a faucibus ante ligula elementum a aptent duis senectus vel ad mattis blandit. Consectetur eget adipiscing mus mi vel nullam adipiscing egestas quis leo a eu sed fermentum purus gravida nam a ad consectetur a mattis ullamcorper. Arcu laoreet ullamcorper nunc parturient erat adipiscing scelerisque iaculis a pulvinar dignissim malesuada scelerisque parturient scelerisque.</p>
    <div id="div2" data-scroll data-scroll-class="visible" data-scroll-position="top" data-scroll-offset="25">Should turn green when gets to top of page + 25px</div>
    <p>Auctor vivamus ac et condimentum himenaeos pretium parturient tincidunt sociosqu inceptos ullamcorper vitae placerat nisi facilisis odio molestie odio turpis venenatis. Nam a cras at ac nam vestibulum at adipiscing consectetur vestibulum aliquet penatibus diam potenti lacus porta. Potenti a potenti at dignissim a semper rhoncus consectetur ad vitae congue posuere a id. Dictumst donec vestibulum lectus quis in neque suspendisse urna nec mattis semper vestibulum justo a faucibus. Posuere rhoncus ad pulvinar a eget dui volutpat aliquam quam platea purus elit lorem ante. </p>
    <div id="div2" data-scroll data-scroll-class="visible" data-scroll-position="bottom" data-scroll-once="true">Should turn green when gets to bottom of page once</div>
    <p>Auctor vivamus ac et condimentum himenaeos pretium parturient tincidunt sociosqu inceptos ullamcorper vitae placerat nisi facilisis odio molestie odio turpis venenatis. Nam a cras at ac nam vestibulum at adipiscing consectetur vestibulum aliquet penatibus diam potenti lacus porta. Potenti a potenti at dignissim a semper rhoncus consectetur ad vitae congue posuere a id. Dictumst donec vestibulum lectus quis in neque suspendisse urna nec mattis semper vestibulum justo a faucibus. Posuere rhoncus ad pulvinar a eget dui volutpat aliquam quam platea purus elit lorem ante. </p>
    <p>Rutrum aliquam vestibulum parturient eleifend vestibulum a a integer mollis cubilia commodo fermentum himenaeos a inceptos adipiscing a sapien ad. Ac id praesent hendrerit donec ad erat elit ullamcorper condimentum a nisi hac dui dui nec lacinia morbi nam potenti proin auctor parturient est cubilia. Augue parturient velit vehicula fermentum erat eu suspendisse parturient euismod a vulputate potenti proin a donec ultricies consectetur consectetur fringilla ullamcorper a nunc ridiculus nec. Laoreet ligula vestibulum parturient feugiat scelerisque ridiculus in nisl vestibulum justo scelerisque a a ut vitae scelerisque quis. </p>
    <div class="scroll-js">Should turn green when gets to top of page (from js)</div>
    <p>Vestibulum malesuada nascetur a a porta sociosqu suspendisse imperdiet enim interdum a vitae consectetur porta luctus mi magna commodo eu nisl. Natoque scelerisque lacus rutrum accumsan ac urna quis in nisl ullamcorper semper risus volutpat morbi platea a a a a aenean massa semper praesent a curae parturient suspendisse elit. Ante ac a in nisl commodo semper odio volutpat magna parturient eu mauris nisi malesuada litora parturient feugiat aptent. Id erat eu dapibus vivamus bibendum a litora consectetur vitae suspendisse a etiam varius posuere dis id nunc fusce habitant sodales tincidunt conubia in. Ornare nec massa mus a vivamus mi ridiculus a adipiscing eleifend vestibulum auctor a lacinia orci dictumst justo a adipiscing. </p>
    <div id="div3" data-scroll data-scroll-class="visible" data-scroll-position="middle">Should turn green when gets to middle</div>
    <p>Quis hendrerit maecenas vestibulum facilisis ullamcorper ipsum natoque a est a adipiscing scelerisque eu vestibulum sapien eu consectetur curae. Tellus donec a aliquam malesuada dapibus mi condimentum metus duis lectus dictumst auctor proin duis. Class parturient pretium consectetur lorem convallis turpis adipiscing erat parturient fusce consectetur consectetur a ac adipiscing ultrices at. Imperdiet eu et imperdiet adipiscing vehicula a ullamcorper per id conubia a faucibus ante ligula elementum a aptent duis senectus vel ad mattis blandit. Consectetur eget adipiscing mus mi vel nullam adipiscing egestas quis leo a eu sed fermentum purus gravida nam a ad consectetur a mattis ullamcorper. Arcu laoreet ullamcorper nunc parturient erat adipiscing scelerisque iaculis a pulvinar dignissim malesuada scelerisque parturient scelerisque.</p>
    <p>Auctor vivamus ac et condimentum himenaeos pretium parturient tincidunt sociosqu inceptos ullamcorper vitae placerat nisi facilisis odio molestie odio turpis venenatis. Nam a cras at ac nam vestibulum at adipiscing consectetur vestibulum aliquet penatibus diam potenti lacus porta. Potenti a potenti at dignissim a semper rhoncus consectetur ad vitae congue posuere a id. Dictumst donec vestibulum lectus quis in neque suspendisse urna nec mattis semper vestibulum justo a faucibus. Posuere rhoncus ad pulvinar a eget dui volutpat aliquam quam platea purus elit lorem ante. </p>
    <p>Rutrum aliquam vestibulum parturient eleifend vestibulum a a integer mollis cubilia commodo fermentum himenaeos a inceptos adipiscing a sapien ad. Ac id praesent hendrerit donec ad erat elit ullamcorper condimentum a nisi hac dui dui nec lacinia morbi nam potenti proin auctor parturient est cubilia. Augue parturient velit vehicula fermentum erat eu suspendisse parturient euismod a vulputate potenti proin a donec ultricies consectetur consectetur fringilla ullamcorper a nunc ridiculus nec. Laoreet ligula vestibulum parturient feugiat scelerisque ridiculus in nisl vestibulum justo scelerisque a a ut vitae scelerisque quis. </p>
    <p>Cat here</p>
    <img src="" data-scroll data-scroll-image="https://placeholdit.imgix.net/~text?txtsize=33&txt=Cat&w=300&h=200"/>
    <p>Vestibulum malesuada nascetur a a porta sociosqu suspendisse imperdiet enim interdum a vitae consectetur porta luctus mi magna commodo eu nisl. Natoque scelerisque lacus rutrum accumsan ac urna quis in nisl ullamcorper semper risus volutpat morbi platea a a a a aenean massa semper praesent a curae parturient suspendisse elit. Ante ac a in nisl commodo semper odio volutpat magna parturient eu mauris nisi malesuada litora parturient feugiat aptent. Id erat eu dapibus vivamus bibendum a litora consectetur vitae suspendisse a etiam varius posuere dis id nunc fusce habitant sodales tincidunt conubia in. Ornare nec massa mus a vivamus mi ridiculus a adipiscing eleifend vestibulum auctor a lacinia orci dictumst justo a adipiscing. </p>
    <picture style="max-width: 100%; display: block">
      <source media="(min-width: 650px)"
              data-scroll data-scroll-srcset="http://placehold.it/465x465?text=Min-650" />
      <source media="(min-width: 465px)"
              data-scroll data-scroll-srcset="http://placehold.it/300x200?text=Min-465" />
      <img data-scroll data-scroll-image="http://placehold.it/300x200?text=default" />
    </picture>
    <p>Quis hendrerit maecenas vestibulum facilisis ullamcorper ipsum natoque a est a adipiscing scelerisque eu vestibulum sapien eu consectetur curae. Tellus donec a aliquam malesuada dapibus mi condimentum metus duis lectus dictumst auctor proin duis. Class parturient pretium consectetur lorem convallis turpis adipiscing erat parturient fusce consectetur consectetur a ac adipiscing ultrices at. Imperdiet eu et imperdiet adipiscing vehicula a ullamcorper per id conubia a faucibus ante ligula elementum a aptent duis senectus vel ad mattis blandit. Consectetur eget adipiscing mus mi vel nullam adipiscing egestas quis leo a eu sed fermentum purus gravida nam a ad consectetur a mattis ullamcorper. Arcu laoreet ullamcorper nunc parturient erat adipiscing scelerisque iaculis a pulvinar dignissim malesuada scelerisque parturient scelerisque.</p>
    <div class="scroll-js">Should turn green when gets to top of page (from js)</div>
    <p>Quis hendrerit maecenas vestibulum facilisis ullamcorper ipsum natoque a est a adipiscing scelerisque eu vestibulum sapien eu consectetur curae. Tellus donec a aliquam malesuada dapibus mi condimentum metus duis lectus dictumst auctor proin duis. Class parturient pretium consectetur lorem convallis turpis adipiscing erat parturient fusce consectetur consectetur a ac adipiscing ultrices at. Imperdiet eu et imperdiet adipiscing vehicula a ullamcorper per id conubia a faucibus ante ligula elementum a aptent duis senectus vel ad mattis blandit. Consectetur eget adipiscing mus mi vel nullam adipiscing egestas quis leo a eu sed fermentum purus gravida nam a ad consectetur a mattis ullamcorper. Arcu laoreet ullamcorper nunc parturient erat adipiscing scelerisque iaculis a pulvinar dignissim malesuada scelerisque parturient scelerisque.</p>
    <p>and here</p>
    <div data-scroll data-scroll-image="https://placeholdit.imgix.net/~text?txtsize=33&txt=Another%20Cat&w=300&h=200"></div>
    <p>Vestibulum malesuada nascetur a a porta sociosqu suspendisse imperdiet enim interdum a vitae consectetur porta luctus mi magna commodo eu nisl. Natoque scelerisque lacus rutrum accumsan ac urna quis in nisl ullamcorper semper risus volutpat morbi platea a a a a aenean massa semper praesent a curae parturient suspendisse elit. Ante ac a in nisl commodo semper odio volutpat magna parturient eu mauris nisi malesuada litora parturient feugiat aptent. Id erat eu dapibus vivamus bibendum a litora consectetur vitae suspendisse a etiam varius posuere dis id nunc fusce habitant sodales tincidunt conubia in. Ornare nec massa mus a vivamus mi ridiculus a adipiscing eleifend vestibulum auctor a lacinia orci dictumst justo a adipiscing. </p>
    <p>Quis hendrerit maecenas vestibulum facilisis ullamcorper ipsum natoque a est a adipiscing scelerisque eu vestibulum sapien eu consectetur curae. Tellus donec a aliquam malesuada dapibus mi condimentum metus duis lectus dictumst auctor proin duis. Class parturient pretium consectetur lorem convallis turpis adipiscing erat parturient fusce consectetur consectetur a ac adipiscing ultrices at. Imperdiet eu et imperdiet adipiscing vehicula a ullamcorper per id conubia a faucibus ante ligula elementum a aptent duis senectus vel ad mattis blandit. Consectetur eget adipiscing mus mi vel nullam adipiscing egestas quis leo a eu sed fermentum purus gravida nam a ad consectetur a mattis ullamcorper. Arcu laoreet ullamcorper nunc parturient erat adipiscing scelerisque iaculis a pulvinar dignissim malesuada scelerisque parturient scelerisque.</p>
    <p>Cat here Only on Mobile</p>
    <div class="hide show-sm">
      <img src="" data-scroll data-scroll-image="https://placeholdit.imgix.net/~text?txtsize=33&txt=Cat%20On%20Mobile&w=300&h=200"/>
    </div>

    <p>Vestibulum malesuada nascetur a a porta sociosqu suspendisse imperdiet enim interdum a vitae consectetur porta luctus mi magna commodo eu nisl. Natoque scelerisque lacus rutrum accumsan ac urna quis in nisl ullamcorper semper risus volutpat morbi platea a a a a aenean massa semper praesent a curae parturient suspendisse elit. Ante ac a in nisl commodo semper odio volutpat magna parturient eu mauris nisi malesuada litora parturient feugiat aptent. Id erat eu dapibus vivamus bibendum a litora consectetur vitae suspendisse a etiam varius posuere dis id nunc fusce habitant sodales tincidunt conubia in. Ornare nec massa mus a vivamus mi ridiculus a adipiscing eleifend vestibulum auctor a lacinia orci dictumst justo a adipiscing. </p>
    <p>Quis hendrerit maecenas vestibulum facilisis ullamcorper ipsum natoque a est a adipiscing scelerisque eu vestibulum sapien eu consectetur curae. Tellus donec a aliquam malesuada dapibus mi condimentum metus duis lectus dictumst auctor proin duis. Class parturient pretium consectetur lorem convallis turpis adipiscing erat parturient fusce consectetur consectetur a ac adipiscing ultrices at. Imperdiet eu et imperdiet adipiscing vehicula a ullamcorper per id conubia a faucibus ante ligula elementum a aptent duis senectus vel ad mattis blandit. Consectetur eget adipiscing mus mi vel nullam adipiscing egestas quis leo a eu sed fermentum purus gravida nam a ad consectetur a mattis ullamcorper. Arcu laoreet ullamcorper nunc parturient erat adipiscing scelerisque iaculis a pulvinar dignissim malesuada scelerisque parturient scelerisque.</p>

    <video data-scroll data-scroll-src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>

    <iframe data-scroll data-scroll-src="https://wikipedia.org/wiki/Main_Page"/></iframe>

    <footer data-scroll data-scroll-class="floating" data-scroll-start="#div2" data-scroll-position="top">Footer</footer>
    <script src="scripts.js"></script>
  </body>
</html>

We ♡ Open Source

In First+Third we love open source, we have already published almost 400 public repositories

Contribute

Interested in helping out? Found a bug?