Scrollimation
A flexible library for animation of elements on scroll.
Getting Started
Install
npm i -S scrollimation
Or load via CDN.
Usage
; let instance = target: "#target" from: 0 to: 100 { let rotate = state; let opacity = state; statetarget0styletransform = `rotate(deg)`; statetarget0styleopacity = opacity; };
Options
target
Default | Type |
---|---|
undefined |
HTMLElement | NodeList | Array | String |
Stores the value in the state. If it is a NodeList it is converted to an Array. You can leave this parameter empty.
target: document from: 0 to: 100 { statetargetstyleopacity = state; };
scrollContainer
Default | Type |
---|---|
window |
HTMLElement | String |
Change this value if it is assumed that the scroll position does not depend on page scrolling.
target: document scrollContainer: document from: 0 to: 100 { statetargetstyleopacity = state; };
from
Default | Type |
---|---|
0 |
Number |
The scroll position from which animation begins. In step
function with current scroll position state.calc
returns a value equal to its first parameter.
target: document from: 100 to: 200 { statetargetstyleopacity = state; };
to
Default | Type |
---|---|
0 |
Number |
The scroll position from which animation ends. In step
function with current scroll position state.calc
returns a value equal to its second parameter.
target: document from: 0 to: 100 { statetargetstyleopacity = state; };
direction
Default | Type |
---|---|
top |
Number |
Use if you need an animation on the horizontal scrolling.
target: document from: 0 to: 100 duration: "left" { statetargetstyleopacity = state; };
easing
Default | Type |
---|---|
linear |
String | Function |
Determines the acceleration curve of your animation.
constant | accelerate | decelerate | accelerate-decelerate |
---|---|---|---|
linear | easeInQuad | easeOutQuad | easeInOutQuad |
easeInCubic | easeOutCubic | easeInOutCubic | |
easeInQuart | easeOutQuart | easeInOutQuart | |
easeInQuint | easeOutQuint | easeInOutQuint |
You can use custom function:
target: document from: 0 to: 100 val * val { statetargetstyleopacity = state; };
Also you can use for each state.calc
different easing function:
target: document from: 0 to: 100 { statetargetstyleopacity = state; };
mode
Default | Type |
---|---|
requestAnimationFrame |
String |
If your animation is too heavy, you can try using mode: 'onscroll'
.
target: document from: 0 to: 100 mode: "onscroll" { statetargetstyleopacity = state; };
fpsLimit
Default | Type |
---|---|
undefined |
Number |
If your animation is too heavy, you can also limits the number of animation steps per second. (with undefined
value FPS will be around 60)
You can try to combine this with mode: 'onscroll'
.
target: document from: 0 to: 100 fpsLimit: 30 { statetargetstyleopacity = state; };
step
Default | Type |
---|---|
() => {} |
Function |
This function is called to redraw animated elements. The parameter is an instance of the animation. Inside the animation instance, you can use the state.calc
function, using which you can calculate the animated values.
target: document from: 0 to: 100 { statetargetstyleopacity = state; // if scrollTop === state.from (0) state.calc(1, 0) return 1 // else if scrollTop === state.to (100) state.calc(1, 0) return 0 };
init
Default | Type |
---|---|
() => {} |
Function |
This function is called when Scrollimation
initialize current animation instance when the animation is not already running.
target: document from: 0 to: 100 { statetargetstyleopacity = state; } { console; };
start
Default | Type |
---|---|
() => {} |
Function |
This function called when the animation begins when the scroll position is state.from. (Only while scrolling from state.from to state.to)
It called before the first step
function is called.
target: document from: 0 to: 100 { statetargetstyleopacity = state; } { console; };
end
Default | Type |
---|---|
() => {} |
Function |
This function called when the animation ends when the scroll position is state.to. (Only while scrolling from state.from to state.to)
It called after the last step
function is called.
target: document from: 0 to: 100 { statetargetstyleopacity = state; } { console; };
reverseStart
Default | Type |
---|---|
() => {} |
Function |
This function called when the reverse animation begins when the scroll position is state.to. (Only while scrolling from state.to to state.from)
target: document from: 0 to: 100 { statetargetstyleopacity = state; } { console; };
reverseEnd
Default | Type |
---|---|
() => {} |
Function |
This function called when the reverse animation ends when the scroll position is state.from. (Only while scrolling from state.to to state.from)
target: document from: 0 to: 100 { statetargetstyleopacity = state; } { console; };
Additional functions
stop
Stops the animation.
let instance = target: document from: 0 to: 100 { statetargetstyleopacity = state; }; instance;
play
Starts the stopped animation.
let instance = target: document from: 0 to: 100 status: "pause" { statetargetstyleopacity = state; }; instance;
remove
Removes the animation handler permanently. Use if playing animation is never needed again.
target: document from: 0 to: 100 status: "pause" { statetargetstyleopacity = state; if documentbodyscrollTop === stateto state; // Animation is played only once. }; instance;
Running the tests
npm test
Author
- Illia Chyrkov - Initial work - illia-chyrkov
License
This project is licensed under the MIT License - see the LICENSE file for details