basic-scroll-animations v1.1.1
Basic Scroll Animations
This is a small and simple library for creating scroll animations, inspired by ScrollMagic.
Installation
npm install basic-scroll-animationsUsage
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