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
- 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 |
| 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. |
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. |
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. |
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.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent