Tween Functions
tween-functions
Robert Penner's easing functions, slightly modified
Animation
tween
ease
react
animation
easing
penner
bezier
interpolation
tween-functions
javascript
Stars
195
Weekly
1.7M
Open issues
3
Bundle
~25 kB
Installation
npm install tween-functionsCode example
import { motion } from "tween-functions";
export function Example() {
return (
<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.35 }}
>
<h2>Animated with Tween Functions</h2>
</motion.div>
);
}Pros & cons
Pros
- Actively maintained by chenglou
- 1.7M weekly downloads. Battle tested
- BSD licensed
Considerations
- Adds roughly ~25 kB to your bundle
- Needs client-only rendering in SSR frameworks
- Not supported in React Native
- 3 open issues on GitHub