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

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.

Please see live demo at CodeSandbox.

import ScrollTween from "scrolltween";

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

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.

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

A ScrollTweenInstance exposes the following methods:

ScrollTween provides the following top-level methods:

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

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

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

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

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.

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.

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.

MIT © christiandrey