Motion and time

Member lesson

Easing curves

Lesson 3 of 10 in Motion and time.

Figma Tutorial: Easing Curves · Figma
Lesson

An easing curve maps time onto progress. On a graph with elapsed time along the bottom and distance travelled up the side, a straight diagonal is linear; a curve that rises steeply and flattens is an ease-out; one that starts flat and steepens is an ease-in. In CSS this is expressed as a cubic Bézier en.wikipedia.org with four numbers, and the named keywords (ease, ease-in, ease-out, ease-in-out) are just preset values of those four.

ease out · arrivinglinear · mechanicalease in · leavingtime →
Linear, ease-out and ease-in curves compared.
A station with one train gliding to a gentle stop at the platform, its speed lines fading, and another pulling away with speed lines growing longer.
One train arrives fast and settles gently, another leaves slowly and gathers speed. Things entering a screen should ease out, and things leaving should ease in.
Member

The rest of this is for members.

You have read the opening of this lesson. The rest of it comes with a membership.

One membership covers all four courses and Brands.

  • All lessons in the four Learn courses
  • All brand breakdowns in the Brands section
  • All quizzes, flashcards and crosswords
  • An AI teacher on every lesson, for up to 60 questions a day
  • All course material published during the membership

Price

Membership is from $12 a month on the Yearly plan, which is charged at $144 once a year. Lifetime access is $59, paid once.Membership is from ₹200 a month on the Yearly plan, which is charged at ₹2,400 + GST once a year. Lifetime access is ₹3,999 + GST, paid once.

Check what stuck

Members only

You can't take this check yet.

Members answer these 3 questions and keep the ticket for this lesson. Every lesson has one.

  1. Question 1, locked

    Something is entering the screen. Which easing usually suits it?

    • Ease out, fast at first then settling
    • Ease in, slow then fast
    • No easing at all
  2. Question 2, locked

    Which of these words means this? “The curve mapping elapsed time to progress. The shape of the curve is the feel of the motion.”

    • Orientation motion
    • Motion budget
    • Easing function
    • Cut
  3. Question 3, locked

    Which of these words means this? “The four-number description of that curve used by CSS. Two control points, two coordinates each.”

    • Storyboard
    • Sound off
    • Cubic Bézier
    • Diegetic sound

Elsewhere in the library

Hear about new courses.

Leave an email and we will tell you when something new lands. We do not write often.