Chapter 91: Tween

Core Idea

What a tween is in web animation: a start value, an end value, a duration and an easing curve. How tween animation compares to springs, and how to create tweens in Motion.

Key Concepts

• Where the name comes from: Original cartoonists were split into senior artists
• The anatomy of a tween: Every tween
• Aren't tweens a GSAP thing?: As we've seen
• Tweens and springs: At the top of the guide we said that a tween involves duration.
• Tweens in Motion: The animate function creates a tween whenever you give it a duration or an easing curve.
• Performance: Tween calculations are extremely cheap.
• Find & fix animation performance issues with your agent.: MotionScore for Agents grades animations in your source code S to F and hands your agent s
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

animate(
  element,
  { opacity: 1 },
  { duration: 0.5 }
)

• What it demonstrates: Core usage pattern for Tween.

Key Takeaways

1. Tween supports Where the name comes from.
2. Tween supports The anatomy of a tween.
3. Tween supports Aren't tweens a GSAP thing?.

Connects To

• Easing functions: related Motion doc page.
• spring: related Motion doc page.
• animate(): related Motion doc page.
• React transitions: related Motion doc page.