ease out
A move that starts fast and slows into place.
A quick win: animate your logo
Lesson 3 · 18 min · Learn it
What the video said
- 1A short brief is enough: how long, what shape, your logo file and any words in quotes.
- 2Attach the logo itself, ideally an SVG or a transparent PNG.
- 3Say one move in plain words, then tune it with numbers: overshoot to 1.08x, then settle.
- 4Say timing in seconds, and fix one thing by pointing at it.
Words to know
ease in
A move that starts slow and speeds up as it leaves.
overshoot
Going slightly past the resting point, then settling back.
linear easing
The same speed the whole way; it reads as mechanical.
lockup
The logo and the word together, moved as one unit.
Question 1 of 4
In a 4 second logo sting, the logo shrinks and fades out at the end. Which ease should that exit use?
Pick an answer, then check it.
The prompt this lesson teaches
In Desktop, Framey builds this with you. Here it is, to read.
To FrameyRead-only
Make this logo sting 4 seconds. The logo lockup enters with an ease-out over 0.6 seconds with a slight overshoot, holds, then exits with an ease-in. No linear easing anywhere. Keep the logo, the word and the colors.
Free for Mac, Windows and Linux
Practice it in Desktop
Fix the sting
Repair a sting that overshoots too far and leaves with the wrong ease, using a number in your ask.
Your own sting
A 4 second sting for your own logo, with the same enter and exit you have practiced.