tween-titan 🦹‍♀️🦸‍♂️

tl;dr: A small-but-mighty vanilla Javascript library for interpolating an element's style based on the user's scroll.

See the fuller, flashier explanation at tween-titan.app.

If you're using React, we've also built a library called react-tween-titan.

Usage

Tween-titan can be imported as a module:

``
import { TweenSelf, TweenWaypoints } from 'tween-titan';
`

Or it can be used on an HTML page as a script.

`


`

API reference

$3

Tweens an element based on its own vertical position in the user's viewport.

Returns a Tween object.

#### Options
* target (HTMLElement) (required): The thing you want to tween
* margin (Object):
* top (number): Add (or subtract) pixels to the top of the scrollable viewport.
* bottom (number): Add (or subtract) pixels to the bottom of the scrollable viewport.
* waypoints (Array of waypoint objects):
* percent (number): The percentage in the scroll experience where the styles should be fully transitioned.
* style: (Object): A set of CSS properties in Javascript style indicating what the element should look like.
* stepFunction (function(percent, style, target)): A function that executes every time the tween updates.
* refreshInterval (number): If set, refreshes the tween at the requested interval in milliseconds. (This is useful if you're expecting layout changes on the page that could shift the tween.) Defaults to null.

$3

Tweens an element based on the position of separate waypoint elements relative to the viewport.

Returns a Tween object.

#### Options
* target (HTMLElement) (required): The thing you want to tween
* margin (number): The number of pixels above (or below) the position of each waypoint that the tween should start.
* waypoints (Array of waypoint objects) (required):
* elem (HTMLElement): The waypoint element
* style: (Object): A set of CSS properties in Javascript style indicating what the element should look like.
* stepFunction (function(percent, style, target)): A function that executes every time the tween updates.
* refreshInterval (number): If set, refreshes the tween at the requested interval in milliseconds. (This is useful if you're expecting layout changes on the page that could shift the tween.) Defaults to null.

$3


#### Methods
- Tween.destroy(): Removes all listeners associated with a tween.
- Tween.refresh(): Manually paints the tween in the proper state depending on user scroll position.

Examples

$3

As you scroll down the page, a red square spins. (Codepen)

`










`

$3

The red square, now stuck in the center of your screen, spins in different directions depending on which waypoint you've run through. (Codepen)

`










``