Entrances

Headline enters from below with overshoot

The default launch-graphic entrance. A long travel on a back.out curve reads as confident, and the small overshoot gives the headline a moment of weight as it lands without turning into a bounce. Use it when the headline is the first thing on screen and has to own the frame.

enter: wrote 2 animated properties. Computed by ramin's planner when this page was built.

What you type

“Make the headline enter aggressively from below, overshoot slightly, and settle”

The studio opens on its starter project, a headline, a kicker, a backdrop and a ring of chips, and applies this prompt to it. Change any number afterwards.

What lands in the inspector

Headline.transform.position.y
218.5 → 40 over 0.65s, back.out +4%
Headline.appearance.opacity
0 → 1 over 0.3575s, quad.out

The easing

back.outStarts fast, travels a little past the target and settles back onto it. The overshoot percentage is how far past it goes.
quad.outA mild deceleration. ramin uses it for opacity so a layer becomes visible before it finishes moving.

Related recipes