How to create animated GIFs for UI design presentations: Part 3 After Effects animations and transitions

What truly sets animated GIFs apart is the smooth transitions and animations between states, one can showcase. This enhances the digital experience for a user. A use case can be scripted or merely a simple mobile app turning on. The only drawback is the quality, length of animation and the size of file. In this third part of our tutorial, I will shared what effects I used to get my animated GIF of a mobile weather app. The first tutorial was on the full overall process and the second tutorial is on exporting into optimized GIFs.

This animation is relatively simple compared to the stuff out there and my reference was the amazing work of Fede Cook

Let’s first break down the animation

Three boxes flow down the screen

One box of full width goes up

Weather information appears on the boxes

A cloud icon appears dropping what seems to be snow

The word snowy appears

The three amigos

The boxes are created as shape layers which have properties like scale, position, opacity, stroke etc. After Effects allows for control of these properties over time. And that is how animations are achieved. This is called Keyframing. For a good tutorial intro on keyframing watch the video below

Process

I focused on creating the animation of one box layer first. In the first frame I have a the box invisible due to its scale not opacity but its width is already defined. This way, when you increase the height, it fills out as a rectangle. I have a keyframe for the filled out rectangle and then, as if driven by gravity the rectangle falls and squashes into a square at the bottom. Hence there is another keyframe at the bottom with different scale and position.

Tutorial on how to add motion blurThe box starts to fill outBox filled outFinal position of the box

What is important for this animation is that you make it as smooth as possible. Therefore by selecting the position keyframes and right clicking on them, you should add Easy Ease from the Keyframe Assistant. This makes it smoother.

To emphasize this motion even further we add a realistic acceleration of the object by select the position keyframes and then clicking on the Graph Editor. This will initially show a simple curve of acceleration with its fastest point in the middle. We adjust the accelaration to happen at the end by skewing the graph to the right; meaning it will accelerate faster towards the end then suddenly slow down into position.

For more practice on slick transitions

Duplicate the box layer and adjust when the keyframes kick in, in order to have them happen one after the other.

The fourth shape, is mere a box of color black but with its opacity reduced to make it transparent so we can see the lovely background. The animation on this is a Position keyframe from off-screen to on-screen.

Text animation

After effects offers its own effects that you can apply on any text layer. One can also create their own effects using a combination of motion and visibility.
Today’s temperature: Combination of opacity and position keyframes
Forecast temperatures: Combination of scale and opacity keyframes
Snowy text: Under the Effects and Presets window > Animation Presets > Text > Slow fade on

The cloud and circles are a combination of opacity, scaling up and position. Easy Ease effect is applied onto the position keyframes for a more smoother transition.