Motion is not linear. It does not move from "here to there." Learn how easing adds fluidity to motion by adding acceleration and deceleration to the object as it moves from "here to there."
- [Instructor] Motion is never constant…or as we have referred to it in this context linear.…Objects accelerate at the start, get up to speed,…and then when they come down to the end they decelerate.…In After Effects, this is known as easing.…Acceleration is ease in and deceleration is ease out.…Any motion involved in any micro interaction…must have easing applied.…Where After Effects really shines…is the ability to control easing…at what seems to be a granular level.…
Let's see how that works.…To get yourselves started,…open the 03 easing file found in your download.…And again, we have our little Twitter icon.…Only this time we're going to apply easing to the motion.…Now if you're not seeing your keyframes here,…what I want you to do is just select the layer…and press the U key…and now you can see the keyframes.…So to apply easing,…what you do is you hold down your Shift key,…select your keyframes,…and right click on a keyframe,…come to the keyframe assistant pop down here…and apply what's called Easy Ease.…
Now you'll notice that the diamonds have now changed.…
Author
Tom Green
Released
4/30/2018- Prototyping motion
- Easing
- Using the Graph Editor
- Working with shapes and masks
- Supporting tap, press, and swipe gestures
- Handling pinch and spread gestures
- Designing patterns
- Making navigation, buttons, and breadcrumbs
- Creating progress bars
- Working with modals, menus, and cards
- Zooming content
- Making a floating action button
- Handling text input and cursors
Skill Level Beginner
Duration
Views
-
Introduction
-
Welcome1m 12s
-
Exercise files1m 28s
-
-
1. Microinteraction Fundamentals
-
Prototyping motion7m 17s
-
The role of easing2m 22s
-
Using the Graph Editor5m 52s
-
Working with shapes6m 43s
-
Using masks4m 25s
-
The joy of parenting3m 43s
-
2. The Common Gestures
-
The tap gesture5m 48s
-
The double-tap gesture3m 52s
-
The long press4m 22s
-
The swipe gesture6m 40s
-
-
3. Design Patterns
-
Buttons and breadcrumbs9m 54s
-
Bottom navigation6m 21s
-
Making a switch9m 13s
-
Creating a progress bar3m 12s
-
Showing progress with value4m 23s
-
Working with modals8m 45s
-
Slide-out menus10m 48s
-
Cards7m 19s
-
-
4. Microinteractions
-
Morphing objects7m 48s
-
Building a bounce ease5m 33s
-
Creating the "jelly effect"8m 15s
-
Zooming content6m 16s
-
A pulsing cursor8m 21s
-
Floating action button7m 1s
-
Ripple effect6m 54s
-
Text input4m 38s
-
Adding cursors5m 58s
-
-
Conclusion
-
Next steps1m 21s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: The role of easing