Basic Scroll Animations

This is a small and simple library for creating scroll animations, inspired by ScrollMagic.

Installation

npm install basic-scroll-animations

Usage

import { updateOnScroll,triggerOnScroll,elementBottom } from 'basic-scroll-animations';

updateOnScroll('.myElement(s)')
    .from(0,{opacity:0})
    .to(1,{opacity:1})
    .using({easing:'easeInOut'});

triggerOnScroll('.myElement(s)')
    .after(elementBottom('.myElement'))
    .applyClass('myClass');

API

Entry point: updateOnScroll(selector)

Registers selected element(s) to be updated on scroll using the returned Animation object.

| Param | Type | Description | | --- | --- | --- | |selector | String | CSS selector for the element(s) to be updated on scroll. |

Returns: Animation

Entry point: triggerOnScroll(selector)

Registers selected element(s) to be applied an effect on scroll using the returned Trigger object.

| Param | Type | Description | | --- | --- | --- | |selector | String | CSS selector for the element(s) to be updated on scroll. |

Returns: Trigger

Position calculation functions:

elementTop(selector) Returns the top position of the element(s) relative to the document in scroll percentage.

elementBottom(selector) Returns the bottom position of the element(s) relative to the document in scroll percentage.

elementHeight(selector) Returns the height of the element(s) in scroll percentage.

Note: if the selector matches multiple elements, the functions will return the data of the first element.

It is recommended to use these functions to calculate the position of the element(s) on scroll. Example:

const start = elementBottom('.myElement(s)');
const finish = elementBottom('.myElement(s)') + elementHeight('.myElement(s)');

updateOnScroll('.myElement(s)')
    .from(start,{opacity:0})
    .to(finish,{opacity:1});

Animation

The Animation object is returned by the entry point functions and is used to define the animation for the element(s) registered with it. The from and to functions are used to define the 2 styles that will be used to interpolate the element(s) style on scroll. !Should only be initalized by an entry function.

from Sets the initial style of the element(s).

| Param | Type | Description | | --- | --- | --- | |percent | Number | The percentage (between 0 and 1) at which the element(s) should start being animated. | |style | Style | The starting style to be applied to the element(s). |

Returns: Animation

to Sets the final style of the element(s).

| Param | Type | Description | | --- | --- | --- | |percent | Number | The percentage (between 0 and 1) at which the element(s) should be fully animated. | |style | Style | The final style to be applied to the element(s). |

Returns: Animation

using Sets the interpolation function to be used to interpolate the element(s) style on scroll.

| Param | Type | Description | | --- | --- | --- | | options | Options | The options to be used to interpolate the element(s) style on scroll. |

Returns: Animation

Style

The Style object is used to define the style of the element(s) to be animated. The Style object currently supports the following properties:

| Property | Type | Values | Description | | --- | --- | --- | --- | | opacity | Number | 0-1 | The opacity of the element(s). | | translateX | Number | any | The X translation of the element(s). | | translateY | Number | any | The Y translation of the element(s). | | scaleX | Number | any | The X scale of the element(s). | | scaleY | Number | any | The Y scale of the element(s). |

Options

The Options object is used to define the behaviour of the animation. The Options object currently supports the following properties:

| Property | Type | Values | Description | | --- | --- | --- | --- | | easing | String | lineareaseIneaseOuteaseInOut | The easing function to be used to interpolate the element(s) style on scroll. |

Trigger

The Trigger object is returned by an entry function and is used to apply effects to the selected elements at a specific scroll position. !Should only be initalized by an entry function.

after Applies the given style to the selected elements after the given scroll position.

| Param | Type | Description | | --- | --- | --- | |percent | Number | The percentage (between 0 and 1) at which the style should be applied to the element(s). |

Returns: Trigger

before Applies the given style to the selected elements before the given scroll position.

| Param | Type | Description | | --- | --- | --- | |percent | Number | The percentage (between 0 and 1) at which the style should be applied to the element(s). |

Returns: Trigger

applyClass

| Param | Type | Description | | --- | --- | --- | | className | String | The class name to be applied to the element(s). |

Returns: Trigger

removeClass

| Param | Type | Description | | --- | --- | --- | | className | String | The class name to be removed from the element(s). |

Returns: Trigger