tweenrex
v1.5.1TypeScript
Bundled CDN files for TweenRex
0/weekUpdated 3 years agoMIT
Published by TweenRex
npm install tweenrexTweenRex
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
 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 |  | 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.