Easing into advanced animation

Advanced Animation Prototypes

Easing refers to how elements animate during their transition between states.

It’s at that heart of creating smooth, fluid transitions. So if you’re creating prototypes that go beyond a basic state change it’s crucial to understand easing.

Atomic gives you many easing options. With the Advanced Motion Control you can select different easing for each element involved in a transition. You can also add custom timing, so some elements can have delayed easing.

For many, easing is still hard to grasp. With bizarre names like ‘quint’ and ‘sine’ it’s no wonder easing options feel cryptic!

The best way to learn easing is to play

Animation easing in Atomic

The best way to find easing for your transition is often to simply dive in and play. What works for one design may not work for the next.

This is because how easing feels and performs depends on what is being animated, and over what duration. For instance, a ‘bounce’ easing might be fun when short and snappy, but awful when animating slowly (see above). Equally, a short/fast ’bounce’ easing on a large element (or ‘expensive’ as Google Design refer to it) might create performance issues.

Dive into the details

Here are some resources to help you wrap your head around easing and Advanced Motion Control in Atomic:

There’s also great reading over on the Google Developers site about animation fundamentals and from Cooper on Motion Design Storytelling.

Special thanks to Atomic user Nick Hallam for asking about easing when we caught up on our recent trip to Sydney.

Got any tips for learning easing to share with other Atomic users? Share them with us on Twitter or in our Facebook Group - we’d love to hear them!

Not using Atomic yet? Try Atomic free for 30 days.

Posted 19 April 2016

Advanced interactive design & prototyping.