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
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:
- Easings.net This was one of the first references for easing, and it remains one of the best. Here you can see the easing curves for the most common easing options and also an animation (on hover) of each one in action.
- Animate Plus / Easing Visualizer This beautiful easing visualiser is the work of Benjamin De Cock, created as part of his Animate Plus project.
- Advanced Motion Control In this help article we explain the steps involved in harnessing the power of advanced animation in Atomic.
Special thanks to Atomic user Nick Hallam for asking about easing when we caught up on our recent trip to Sydney.
Not using Atomic yet? Try Atomic free for 30 days.