scroll-triggers

scroll-triggers

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

Features

• 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 the width of an element based on scroll % (great for scroll progress bars)
• API for both HTML and Javascript

Install

npm install scroll-triggers

Setup

import 'scroll-triggers';

// alternative
import scrollTriggers from 'scroll-triggers';

Events

Custom events are fired/listened on the element:

Event	Type	Description
scrolltriggers:inView	Fired	Element is in view
scrolltriggers:outOfView	Fired	Element is out of view
scrolltriggers:pause	Listened	Pauses scroll-triggers
scrolltriggers:resume	Listened	Resumes scroll-triggers

Options

List of available options:

Name	Type	Description
className	{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}	The offset 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 = false}	Set the width of an element based on scroll %
once	{boolean = true}	Whether scroll-triggers should be executed once or not
fixed	{boolean = true}	Needed for fixed (position: fixed) elements
inView	{function}	Callback executed when element is in view
outOfView	{function}	Callback executed when element is out view

Usage

See the example.

HTML

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

<div data-scroll data-scroll-class="class-to-add" data-scroll-start=".some .selector"></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>

Add class at when element hits bottom of page

<div data-scroll data-scroll-class="class-to-add" data-scroll-position="bottom"></div>

Add class at when element hits middle of page

<div data-scroll data-scroll-class="class-to-add" data-scroll-position="middle"></div>

Set an image when an element comes into view as a background image

<div data-scroll data-scroll-image="/path/to/image.jpg"></div>

<!--
  This will generate the markup below:
  <div data-scroll data-scroll-image="/path/to/image.jpg" style="background-image: url('/path/to/image.jpg'); background-repeat: no-repeat;"></div>
-->

Set the width of an element based on scroll % (great for progress bars)

<div data-scroll data-scroll-progress></div>

Set the src property when an element comes into view (great for lazy load)

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

Set the srcset property when an element comes into view (great for lazy load)

<picture>
  <source media="(min-width: 650px)" data-scroll data-scroll-srcset="http://placehold.it/465x465?text=Min-650" />
</picture>

JavaScript

import scrollTriggers from 'scroll-triggers';

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) => {}
  }
]);