Easing

Easing is the speed curve of a movement: how fast it goes at each moment between its start and its end. Without easing, an element moves at a constant speed and stops dead, which looks mechanical; with an ease-out it starts fast and slows into place, the way a real object comes to rest.

The common curves

• Ease-out starts fast and slows down. Use it for things arriving.
• Ease-in starts slowly and speeds up. Use it for things leaving.
• Ease-in-out speeds up, then slows down. Use it for moves across the screen, card flips and wipes.
• Back overshoots its target a little and settles, which suits pops, badges and stickers.
• Elastic and bounce wobble or bounce on arrival. Playful, so use them sparingly.
• Sine is soft and even, good for a gentle float that keeps a still frame alive.

Timings that read well

On a phone screen, entrances of 0.25 to 0.6 s with an ease-out read well. Exits are faster, 0.15 to 0.3 s. Never start more than three things at the same instant; stagger the rest by 0.04 to 0.12 s, so a line of words arrives one after another instead of as a block. Hold the last frame for 0.8 to 1.2 s.

The look of a video changes the curve too. A clean product look uses soft, springy eases, a luxury look slow and gentle ones, and a playful look bouncy ones.

Easing in a GSAP timeline

In a GSAP timeline, every tween names its ease next to its duration:

tl.fromTo(".word", { yPercent: 115 }, { yPercent: 0, duration: 0.5, ease: "power4.out", stagger: 0.08 }, 0.4);
tl.fromTo(".badge", { scale: 0 }, { scale: 1, duration: 0.35, ease: "back.out(2.2)" }, 1.2);
tl.to(".card", { opacity: 0, duration: 0.2, ease: "power2.in" }, 5.6);

The words rise one by one with a strong ease-out, the badge pops with an overshoot and the card leaves quickly with an ease-in. In GSAP, power1 to power4 get steeper as the number goes up, expo is steeper still, and the number in back.out(2.2) sets how far it overshoots.

In Motion Cheat Code

You do not have to write the code. Describe the ease in plain words and numbers in the SCENES part of a prompt ("rises word by word, power4.out, 0.5 s, 0.08 s apart"), or name one of the 30 animation moves, each with a fixed timing and ease. Each of the 13 skins brings its own motion personality.