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
Learn how to make an icon animation in Adobe After Effects
Show-off your icon animation on your phone for your team, clients, or stakeholders
Build a portfolio-quality showcase UI Animation
Export your assets for hand-off to engineers