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

• Check your Heart with TweenRex + Polymorph
• Dinos Unite! (Sub-tweens with TweenRex)
• Syncing Horizontal Scroll with TweenRex
• View All Demos

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 | | This package contains TweenRex, TyrannoScrollus, and TRexObservable. It contains all you need for animation at minimum. | | @tweenrex/render | | 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. There are also plenty of helpful people on the #tweenrex channel on the Animation at Work Slack.