Shop Onsite workshops Blog Templates Affiliates About 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

🔥 Save 15% on any UI animation course or bundle on uxinmotion.com

Join my mailing list to receive a one time coupon, plus the latest news and updates from me. Don't worry, your information will not be shared.

Click here for coupon

You're a designer, you get paid to have opinions. Share them! 👇🏽

Close

🔥 Take 15% off your first purchase

90% Complete