Trekk NPM | npm.io

:triangular_flag_on_post: 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

<script src="https://unpkg.com/trekk@0.1.0/build/trekk.js"></script>

$ npm install trekk

Usage

commonJS

var trekk = require('trekk');

// Define your trails...

trekk() // Start

ES6

import trekk, { trail } from 'trekk';

// Define your trails...

trekk() // 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.querySelector('header')

const fadeInHeader = progress => {
	header.style.opacity = progress
}

const headerTrail = trail(header, fadeInHeader)

Nested

const header = document.querySelector('header')
const title = document.querySelector('.title')
const icon = document.querySelector('.icon')

const fadeInHeader = progress => {
	header.style.opacity = progress
}

const slideInTitle = progress => {
	title.style.transform = `translateX(${100 * progress})`
}

const rotateIcon = progress => {
	icon.style.transform = `rotate(${360 * progress}deg)`
}

const headerTrail = trail(header, fadeInHeader)
headerTrail(100, 200, slideInTitle)
headerTrail('40%', '40%', rotateIcon)

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

args-js invariant numeral raf

@infinitebrahmanuniverse/nolb-trek @everything-registry/sub-chunk-2970

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago