FAQ: Animation - Transitions - Timing Function

This community-built FAQ covers the “Timing Function” exercise from the lesson “Animation - Transitions”.

Paths and Courses
This exercise can be found in the following Codecademy content:

FAQs on the exercise Timing Function

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

For the transition-timing-function property, what’s the “subtle difference” between the values ease-in-out and ease?

4 Likes

I was wondering that too.

1 Like

If we graph the transition with speed on the y-axis and time on the x-axis we have a choice of curves. Quick at first then slower; slower at first, then faster; slow-fast-slow; fast-slow-fast; and so on. The timing function is that curve.

If we compared this to a dissolve, that is, a transition between two slides, the curve might resemble a normal curve. The first slide would be fading more slowly at first then be overtaken by the new slide at the half way mark (the normal) and would be fading quickly after that while the new slide resolves into full view. Not a very good example, but a hint of one, at any rate.

That graph, by the way, looks very much like acceleration since it has time in both dimensions giving seconds squared.

1 Like

I got the dissolve example, but I didn’t get the difference of one ‘dissolve’/ease and the other/ease-in-out :frowning: I tried (not too intently, I’ll admit) to find an image, but couldn’t. have any of you found it yet?

I did like the visual aid from this resource, though it ain’t about the ‘subtle difference’: Animation Principles in UI Design: Understanding Easing | by Suresh V. Selvaraj | Motion In Interaction | Medium

1 Like

Why does the gazelle grow to max-height? I thought max-height is just to indicate the largest an element can be, and doesn’t actually do anything until the browser is resized?