Reactive Tweening Engine
Branch: master
Clone or download
Latest commit 46db70b Feb 1, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist updates to dist and submodules Dec 19, 2017
docs Update Jan 31, 2018
scripts added recurve Dec 19, 2017
.editorconfig updated build scripts and started new deploy script Dec 7, 2017
.gitignore updates to docs and bundling Nov 18, 2017
.travis.yml Update Jan 31, 2018
lerna.json updated version Dec 4, 2017
package-lock.json package-lock Dec 19, 2017
tslint.json added easing property to TyrannoScrollus and TweenRex Nov 13, 2017


Reactive Tweening Engine


  • Playback controls: play, pause, reverse, playbackRate, seek, labels, etc.
  • Animate anything with render functions
  • Scroll sync any element to an animation, not just the documentElement
  • Simple Reactive API with no strings attached
  • Super tiny with plans to stay that way
  • Free for commercial and non-commerical use under the MIT license


Dinos Unite! (Sub-tweens with TweenRex)

Syncing Horizontal Scroll with TweenRex


Name Description
TweenRex Animate over time with complex choregraphy. Includes sub-tweens, full replay controls, seeking, and playback rate controls.
TyrannoScrollus Sync animations to horizontal or vertical scroll position of elements
TRexObservable General Observable for reacting to values over time. BehaviorSubject in RxJs is a close approximation. This is the base class for other types of tweens.

Setup through NPM

Install one or more of the following packages by running this command: npm i {package} -S

Package Status Description
@tweenrex/core Build Status This package contains TweenRex, TyrannoScrollus, and TRexObservable. It contains all you need for animation at minimum.
@tweenrex/render Build Status This package contains interpolate and other rendering functions. This package is intended to help reduce boilerplate code and streamline development while creating typical animations.

Setup with Prebuilt scripts

Include one or more of these scripts

Link Description
tweenrex.min.js This script adds TweenRex, TyrannoScrollus, and TRexObservable to the global window variable. This the a pre-bundled version of @tweenrex/core.
tweenrex-render.min.js This script adds interpolate to the tweenrex global window variable. This is a pre-bundled version of @tweenrex/render.
tweenrex-all.min.js This script is a combination of all other scripts. This is meant primarily for code playgrounds like CodePen.

Recommended Helper Libraries

TweenRex handles timing and dealing with values over time, but is built to work with other libraries. Here are some recommended helper libraries that match up with TweenRex very well.

Name Type Description
Flubber SVG Morph Morph SVG with this heavy-weight library. This library does a great job of morphing between very different shapes at runtime. It cannot handle holes in SVG, but it has a large arsenal of helper functions. It is about 53 KB minified. This is a good choice when smoothness of animation trumps all other needs.
Path.js SVG Morph Simple SVG morphing library that can tween between two paths with matching SVG commands and the same number of segments. It is about 4KB minified. This library is a good choice when the SVG's are highly optimized for one another.
Polymorph SVG Morph Morph SVG Paths with this lightweight library. It can support variable length paths in addition to handling holes in SVGs. It is just under 6KB minified. It is a good all around choice for performant morphs of highly variable complex paths.
Lengthy SVG Draw Lengthy is a JavaScript microlibrary (1.1kb min, 0.6kb gzipped) to get the length of SVG shapes. The length will automatically be added to the element as a CSS Var to make it easy to do CSS animations of SVG stroke-dashoffset for the wonderful line drawing SVG technique and other interesting animations.
d3-interpolate Interpolation Provides a variety of interpolation methods for blending between two values. Values may be numbers, colors, strings, arrays, or even deeply-nested objects. This could easily be used with TweenRex and TyrannoScrollus
nm8 Tweening This super small tweening library fits in a tweet! This library is compatible with the render package. If you prefer low-level, this is as low as you can get.


This library is licensed under MIT.

Contributions / Questions

Please create an issue for questions or to discuss new features. There are also plenty of helpful people on the #tweenrex channel on the Animation at Work Slack.