scrolltween v0.0.8-beta

scrolltween

ScrollTween is a utility that enables binding of properties of DOM elements to the scroll event and tweening of these properties accordingly.

Installation

Setup via NPM

npm install scrolltween --save

Setup via Yarn

yarn add scrolltween

ScrollTween ships with four build flavors:

• UMD: index.umd.js
• AMD: index.amd.js
• CommonJS: index.cjs.js
• ES6 module: index.esm.js

In browser environments, include index.umd.js in the body tag of an html page as shown below:

<script src="dist/index.umd.js"></script>

In node environments, however, import the module as follows.

const ScrollTween = require("scrolltween");

or

import ScrollTween from "scrolltween";

ScrollTween ships with Typescript definitions for write-time type checking.

Live demo

Please see live demo at CodeSandbox.

Quickstart

import ScrollTween from "scrolltween";

ScrollTween.define([
	{
		selector: ".element",
		duration: 20,
		props: {
			rotate: 90,
		},
	},
]).start();

Key Concepts

TweenableProperties

TweenableProperties is an object that defines the properties of a DOM element that are to be tweened in an action. The following properties can be tweened.

• increment: Provide value to be spread across tween range.
• final: Provide value at the end of tweening.

Note: Unit of fontSize is px.

ScrollTweenAction

A ScrollTweenAction describes a DOM element to be tweened, and the tweening configuration. It takes the following shape:

ScrollTweenInstance

A ScrollTweenInstance exposes the following methods:

Overview

ScrollTween provides the following top-level methods:

• define
• sequence
• parallel
• staggered
• fromChildren
• raw

define

ScrollTween.define(actions) allows initial configuration of tweening actions. It returns a ScrollTweenInstance.

sequence

ScrollTween.sequence(trigger, actions, delay?) allows definition of tweening actions that are to be executed sequentially. It returns an array of ScrollTweenAction.

parallel

ScrollTween.parallel(trigger, actions, delay?) allows definition of tweening actions that are to be executed in parallel. It returns an array of ScrollTweenAction.

staggered

ScrollTween.staggered(trigger, stagger, actions, delay?) allows definition of tweening actions that are to be executed in parallel, but with successive delays. It returns an array of ScrollTweenAction.

fromChildren

ScrollTween.fromChildren(parent, duration, props) is a utility function that generates a list of ScrollTweenAction from the direct children of a DOM element. It returns an array of ScrollTweenAction.

raw

ScrollTween.raw(action, callback) calls a callback with a value between 0 and 1, representing the tween state. This will typically be used for tweening instances not covered by ScrollTween. It's optimized and only calls the callback with a new value only if the value has changed. It returns a ScrollTweenInstance that is auto-started and can also be refreshed and destroyed.

License

MIT © christiandrey