node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

tweenrex

TweenRex

Reactive Tweening Engine

Features

  • 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

Demos


Dinos Unite! (Sub-tweens with TweenRex)

Syncing Horizontal Scroll with TweenRex

Documentation

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
Just Curves Easing A library of reusable easing functions. Includes all Penner easings and functions for creating custom cubic-bezier and step easings. It also can parse all CSS timing functions from a string.
Flubber SVG 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 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 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.

License

This library is licensed under MIT.

Contributions / Questions

Please create an issue for questions or to discuss new features.