Introduction to Animations

Animations

Animations should enhance the app experience. They make your app more engaging and dynamic. Good animations should provide feedback on taps and gestures, giving a sense of direct manipulation.

Animation Basics

There are a number of basic animation techniques that we can use to transition from point A to point B. These animations are so common that they can be found on every platform, from Web to iOS.

Typically, you don’t need to set more than 2 animation states: Begin and End. The computer will know what happens in between those states.

Translate

This is as simple as moving the position from X and Y. With different timing, Translate is used for sliding, bouncing and shaking visual elements.

Rotate

By changing the angle of the element, you can create interesting effects like the loading animation in iOS or the Add icon that turns into a Close icon.

Scale

This animation pervades iOS, such as the app icon that zooms inside the app or the photo thumbnails that expand to full-screen view.

Animation Curve

The curve plays a big part in making the animation more life-like. Good animations replicate real physics. A ball that bounces on the ground makes a much more interesting subject than one that falls flat. Modern apps tend to use Spring and Ease animations much more than Linear.

3D Transform

When changing the position, you can also play with the X, Y and Z values. Although generally more rare and harder to pull, 3D transforms can give interesting results that can really set your app apart.

Property Change

A very popular animation technique is to change the color and opacity properties. Just modifying the opacity results in the Fade In / Fade Out effect, which is extremely common. Animating the layer, text and background colors can also yield effective transitions.

Combining Animations

On almost every occasion, you’ll want to work with 2 or 3 transforms at the same time. By doing so, you get interesting animations inspired by real life physics such as Bounce, Morph, Shake, etc. Example: Animation by Tubik Studio.

Preset \ Animation

On Spring, an animation framework that I created for iOS, I made available a bunch of preset animations that combine many transforms at once. They can be inexpensively integrated to your app, without even learning how to code.

Animations Shouldn't Last Longer Than 1 second

A long animation can lead to frustration and can get in the way of performing a task. The ideal duration that I’ve personally found is 0.3 - 1 second. If you do a Fade In, Slide or Scale, that’s the duration that you should aim for. Anything shorter would make it seem like there was no animation or worse it could stress your users. Anything longer may seem underperforming and can be in the way of doing what they want. Example: Animation by Jakub Antalík.

Create animating Icons

For this exercise, we will use After Effects and Figma. To move our Figma assets to After Effects, we need to install two plugins - one for After Effects and the other one for Figma. Let's go to the AEUX website, download the plugins and install them respectively.

Now that we have installed the plugins, let's go to AE and then to the tab bar. Click on Window < Extensions < AEUX. A small window will appear.

Let's setup the parameters. In +New Comp, choose 3x for Comp size multiplier, 30 fps for Frame rate and 2 seconds for duration.

Now that we have the parameters set on AE, let's move to Figma. Head over to the tab bar, Plugins < Development and select AEUX.

Next, select the frame that you would like to import to AE and click Send selection to Ae.

Going back to AE you will see that the Figma assets are now there. Duplicate the ellipse 1 and ellipse 2 assets. Hide these temporarily.

Select ellipses 1, 2 and 3. Then, select the scale property and add some keyframes with the following values: for 0.10 frame → 100%, for 0.20 frame → 110% and for 1.0 frame → 100%.

Enable the trim path parameter for ellipse 1 and 2. This option will allow us to see all the traces of the icon.

Now, select all the keyframes in End from 0.10 frame and put them to 100%. Then, select the keyframes in 0.20 and let's put them to 0%.

To create a more fluid animation, grab the keyframes from ellipse 2 and move them two frames to the right. Example: the keyframes placed at 0.10 frames will be moved to 0.12.

For ellipse 1, give two frames of distance for every keyframe from ellipse 2. So, if a keyframe from ellipse 2 is at 0.12, we will move the keyframe from ellipse 1 to 0.14.

Unhide ellipse 4 as well as ellipse 5 and enable the trim path parameter. Add these values: 100% on start and 100% on end.

Next, add some keyframes to ellipse 4 and 5. Set their end parameter in the following frames: 0.24 with 100% and 1.04 with 0%

Finally, move the keyframes of ellipse 4 to frames to the right. This will give a more fluid animation to the icon.

This is what our animations should look like.

Conclusion

Animation is an important part of the design process. Nowadays, there are tools like lottie which can help you add animation to your app. Besides the tools, you can find different animation libraries that can help you speed up your workflow.