Shop Blog Templates Bundles Login

How to retime your UI Animation for client presentation in After Effects

Click here to download the source files and follow along

UI Animation needs to be fast and clean. There’s no two ways about it. If it’s slow, it appears unresponsive, and unprofessional.

In fact, the single biggest mistake I see designers make is that their motion design is way too slow. If you have a transition happening over .5 seconds for mobile, you need to speed it up.

The general rule of thumb is that it should take as short as time as possible without being jarring.

The tricky thing is that when you’re presenting your motion to folks who don’t get this, sometimes it can be too fast for them to register the mechanics of the motion.

That’s why, based on your audience, I sometimes recommend doing a ‘slowed down’ version for presentation.

In this tutorial, I show you 2 ways to do this extremely quickly and efficiently.

In this video, I show you two techniques that I recommend.

The first technique involves simply stretching your clip. This is incredibly fast and will allow you to create a duplicate ‘presentation’ version in seconds. Basically, you drag your composition to the ‘new composition’ icon, extend the new composition duration, then stretch your pre-comp.

The other way involves this insane thing called ‘time remapping’ where essentially time becomes a key-frameable property on your layer. If this hurts your brain, you are not alone. This is more advanced, and if you quickly need to create a new slowed down version, the first option is the way to go

Happy prototyping,

Issara

 


Become a UI animation pro this week and save $571 with my ‘Ultimate UI Animation Fundamentals bundle'


Find me on –

Facebook: https://www.facebook.com/uxinmotion
YouTube: https://www.youtube.com/channel/ux-in-motion
Medium: https://medium.com/ux-in-motion
Twitter: https://twitter.com/ux_in_motion
Dribbble: https://dribbble.com/issara

Get my free UI animation tutorials and resources emailed to you directly

Join 25k designers from around the world who have signed up to my UI animation newsletter. You'll be the first to get my new tutorials, articles, or courses on UI animation.

Close

50% Complete

Get my free UI animation tutorials and resources emailed to you directly

Join 25k designers from around the world who have signed up to my UI animation newsletter. You'll be the first to get my new tutorials, articles, or courses on UI animation.