A JavaScript/TypeScript tweening engine for animating object properties with optimized easing functions.
tween.js is a JavaScript and TypeScript library for creating animations by smoothly transitioning numeric properties of objects over time. It solves the problem of manually calculating intermediate values in animations by providing a simple API to define start and end states with configurable easing curves. Developers use it to animate anything from DOM element positions to custom object properties in games or data visualizations.
Frontend developers, game developers, and creative coders building interactive web applications, data visualizations, or canvas-based animations who need a lightweight, non-opinionated tweening solution.
Developers choose tween.js for its simplicity, performance, and flexibility. It offers a minimal API focused solely on interpolation, integrates seamlessly into any animation loop, and includes optimized easing functions without imposing rendering or styling decisions.
JavaScript/TypeScript animation engine
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
The library is minimal, focusing only on tweening numeric properties, which keeps it small and efficient without unnecessary bloat, as emphasized in the README's philosophy.
It doesn't include its own animation loop, allowing seamless integration into any existing requestAnimationFrame or game engine loop, demonstrated in the example code.
Incorporates Robert Penner's equations for smooth, natural motion curves, which are reusable outside of tweens, as highlighted in the features.
Methods like .to() and .easing() can be chained for clear, readable animation definitions, making it easy to build complex sequences, as shown in the examples.
It doesn't handle CSS units or interpolate colors, requiring developers to manually append units and manage color conversions, which adds overhead for web animations.
Users must implement their own animation loop using requestAnimationFrame, adding boilerplate code for integration, as seen in the basic example.
Only supports tweening numeric properties, so animating strings, colors, or complex objects requires additional workarounds, limiting its out-of-the-box utility.