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