Say I need to fade in an element — I animate the value of opacity from 0 to 1. Easy. Done. Then I play the animation to check — the animation doesn’t quite feel right. Wouldn’t it be better if it started fading really quickly and then slowly reached full opacity? Why not use ease-in! Or is it ease-out… I forget. Let’s try either and then I’ll know which I meant.
You’ve all been there. I think… Or maybe you’ve all figured it out and I’m alone on this one. But in any case, what in the hell is ease-in and ease-out actually referring to? Whenever I finally find which the correct direction, it always seemed to be the opposite of what I initially thought. Why?
I’ve figured out why, and I believe someone made a mistake somewhere along the line.
To start, here is a diagram from Richard Williams’ Animation Survival Kit — the modern animator’s prime resource to learn the secrets of Disney’s 9 old men; animation legends.
What it’s referring to here is Disney’s 12 Basic Principles of Animation. One of which is titled ‘Slow in and slow out’ — or, more familiarly, ‘Ease-in and ease-out’.
Upon analysing the animation above, you can clearly see that ‘ease-out’ is at the start of the timeline, and ‘ease-in’ is at the end. “WOAH!” some of you might be saying right now. I know. “That’s like… the complete opposite to how it works in code!” yep. Weird huh?
Just to prove it, here are some diagrams stolen from Google Developers showing how CSS animation easing works.
Ease-out at the end.
Ease-in at the start.
Ground-breaking, right?
Why is it that the animation world and the development world have differing definitions?
The Solution
The solution lies with two problems — the inferred subject, and the terms themselves.
When an animator talks about easing in and out of something, they are, in fact, talking about a pose or a keyframe. Therefore, to ease in to a pose, the easing occurs just before, and to ease out of a pose, the easing occurs directly after. It’s very simple, and makes sense grammatically.
In development however, the easing is not applied to a pose or keyframe, but instead, the animation itself. I.e. the movement between two poses. In doing so, ease in and out just don’t make sense! What ‘in’ and ‘out’ actually refer to in this sense is the start and end of the animation. I’m not sure who was the first to implement these terms, but I honestly believe they hadn’t done their animation homework — and now it’s too late, it’s everywhere. The damage has been done. A small difference, but wouldn’t ease-start and ease-end have just made everything a whole lot clearer?
For me personally, the first way I learnt about these animation terms was from an animator, and not a developer — so therein lies my problem: how to forget the intended use of these terms… hopefully writing this article will help.
Trong bài học này bạn sẽ được học về rất nhiều loại keyframe như: Keyframe vuôn, Keyframes tròn, Cách điều khiển các keyframes để có thể làm việc tốt hơn và nhanh hơn, Rove Across Time là gì.
- Projects
- Service
- Studio
- Explore
- Activities
- Webinar
- Contact
© 2022 DeeDee Animation Studio. All Rights Reserved.
contact@deedeestudio.net
[+84] 903 415 890
Hanoi
Central Point, 219 Trung Kinh Street, Cau Giay District, Ha Noi
Ho Chi Minh City
SGR Building, 167 -169 Dien Bien Phu Street, Dakao Ward, District 1
Headquarter: Central Point Building - 219, Trung Kinh, Cau Giay, Ha Noi
Ho Chi Minh Branch Office: SGR Building - 167-169 Dien Bien Phu, Dakao Ward, District 1
contact@deedeestudio.net
- Projects
- Service
- Studio
- Explore
- Activities
- Webinar
- Contact
© 2022 DeeDee Animation Studio. All Rights Reserved.
contact@deedeestudio.net
[+84] 903 415 890
Hanoi
Central Point, 219 Trung Kinh Street, Cau Giay District, Ha Noi
Ho Chi Minh City
SGR Building, 167 -169 Dien Bien Phu Street, Dakao Ward, District 1
Headquarter: Central Point Building - 219, Trung Kinh, Cau Giay, Ha Noi
Ho Chi Minh Branch Office: SGR Building - 167-169 Dien Bien Phu, Dakao Ward, District 1
contact@deedeestudio.net
Ease In và Ease out là gì?
Slow In [Ease In]: Là khi vận tốc của đối tượng tăng dần, tính từ trạng thái tĩnh đến khi vào chuyển động. Slow Out [Ease Out]: Là khi vận tốc của đối tượng giảm dần, từ trạng thái chuyển động trở lại trạng thái tĩnh.