🚩 trekk
About
Trekk is a library for making scroll based animations easy-peasy. Trekk does NOT give you anything else than values between 0 and 1 to use in your animation states. The animations you create yourself, or use a library like anime.js.
Install
$ npm install trekk
Usage
commonJS
var trekk = ; // Define your trails... // Start
ES6
; // Define your trails... // Start
API
trekk(options)
Start trekk. You need to run this only once in your scripts.
Options
Option | Type | Default | Description |
---|---|---|---|
debug | boolean |
false |
Enter debug mode. |
iterate | function(next) |
requestAnimationFrame |
Update function. |
trail(...)
Use trail
to create timelines in your document. All parameters are optional.
Parameters
Param | Type | Default | Description |
---|---|---|---|
element | node |
undefined |
Pass a DOM element to use as start and end position of the trail. |
startPixels | integer |
undefined |
Start position of the trail in pixels. If this is a nested trail this will be appended to the parent trail start position. |
endPixels | integer |
undefined |
End position of the trail in pixels. If this is a nested trail this will be appended to the parent trail end position. |
startPercentage | string |
undefined |
Start position of the trail in percentage. If this is a nested trail it will be a percentage of the parent trail length. |
endPercentage | string |
undefined |
End position of the trail in percentage. If this is a nested trail it will be a percentage of the parent trail length. |
progress | function(progress) |
undefined |
Called on update with the current progress. |
options | object |
{} |
Object with options. See below |
Options
Param | Type | Default | Description |
---|---|---|---|
label | string |
undefined |
Used as a label when debugging. |
offset | function(progress) |
undefined |
Called on update with the current progress. |
lerp | number |
1 |
Smooth the progress over time with some linear interpolation. Takes a value from 0 to 1. |
ease | string |
"linear" |
Easing function to run before progress is broadcasted. See Easings for supported strings. |
waiting | function |
undefined |
Called once when the y scroll position is above the trail start position. |
walking | function |
undefined |
Called once when the y scroll position is within the trail start and end position. |
finished | function |
undefined |
Called once when the y scroll position is below the trail end position. |
Examples
Basic
const header = document const fadeInHeader = { headerstyleopacity = progress} const headerTrail =
Nested
const header = documentconst title = documentconst icon = document const fadeInHeader = { headerstyleopacity = progress} const slideInTitle = { titlestyletransform = `translateX()`} const rotateIcon = { iconstyletransform = `rotate(deg)`} const headerTrail =
addTimeline(options)
Param | Type | Default | Description |
---|---|---|---|
options | object |
{} |
See Options |
Options
Param | Type | Default | Description |
---|---|---|---|
label | string |
"Undefined" | Used as a label when debugging. |
source | function |
() => window.pageYOffset |
Function that returns source value. |
start | function |
() => 0 |
Function that returns start position of timeline. |
end | function |
0 | Function that returns end position of timeline. |
modifier | function |
(p, s, e) => (p - s) / (e - s) |
Function given a source value, calculates the progress in between the start and end value. |
lerp | number |
1 |
Smooth the progress over time with some linear interpolation. Takes a value from 0 to 1. |
ease | string , function(progress) |
"linear" | Easing function to run before progress is broadcasted. See Easings for supported strings, or pass your own easing function. |
waiting | Called once when the y scroll position is above the trail start position. | ||
walking | Called once when the y scroll position is within the trail start and end position. | ||
finished | Called once when the y scroll position is below the trail end position. | ||
progress | Called every progress update with the current progress. |
Easings
// linear// easeInQuad// easeOutQuad// easeInOutQuad// easeInCubic// easeOutCubic// easeInOutCubic// easeInQuart// easeOutQuart// easeInOutQuart// easeInQuint// easeOutQuint// easeInOutQuint
Taken from https://gist.github.com/gre/1650294