Tween
ELI5 — The Vibe Check
A tween (short for 'in-between') smoothly transitions a value from A to B over time. Move an element from x=0 to x=100 over 500ms? That's a tween. Every animation library is basically a tweening engine at its core. The term comes from traditional animation where artists drew the in-between frames.
Real Talk
Tweening is the process of generating intermediate values between two states over a specified duration. In web animation, tween libraries interpolate numeric properties (position, scale, opacity) using easing functions. GSAP's core is a tween engine; Framer Motion uses spring-based tweens.
When You'll Hear This
"GSAP.to() creates a tween from the current value to the target" / "Spring-based tweens feel more natural than linear easing"
Related Terms
CSS Transitions
CSS transitions are the smooth operators of web design.
Framer Motion
Framer Motion makes animations in React embarrassingly easy. Want a div to slide in? Just say 'animate this from here to there' and it handles the physics.
GSAP (GSAP)
GSAP (GreenSock Animation Platform) is the animation library that professional agencies use for those jaw-dropping website animations.
Keyframes
Keyframes are like the storyboard for a CSS animation.