: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/[email protected]/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