Jump to content

Design & UX

Adventures In Animation: Using After Effects

The team has been experimenting with Adobe After Effects, and had lots of fun.


After Effects, part of the Adobe family, is a digital visual effects, motion graphics and compositing application. Although primarily used in the post-production process of filmmaking and television, this powerful piece of software is probably the best out there for creating seamless 2D animations. We decided to try it out. 

Although incredibly daunting when first opened, After Effects is fairly simple to understand once you’ve poked around, just like any other Adobe software. It’s a great feeling playing your animation for the first time; very different from finishing a website design as it’s something that everybody can appreciate, not just designers.

“Why not Zoidberg?”

There are loads of tutorials and resources available (see our helpful list below) on the web for learning how to use After Effects. We started with Fraser Davidson’s Skillshare tutorial: Simple Character Animation, which teaches you how to animate a walking character. This is what we made:

Yes, that’s supposed to be Futurama’s Zoidberg. No, it’s not perfect - far from - but it was a really useful way to learn the ins and outs of After Effects, even if it did take several days to figure out how to render the project as a transparent GIF! 

After a few days of experimenting we felt confident enough to have a go at animating some of the icons on our website. Although these interactions are subtle, they add an extra layer of personality to the page that a static image just doesn’t deliver, and they’re incredibly fun to create and play around with.


Designing a clock icon

Once you understand the basic tools and you’ve wrapped your mind around using keyframes, the rest is simple. We first designed the vector icons in Illustrator, making sure to keep each separate moving asset on its own layer – for example, when designing the clock icon, we made sure to keep the hours, minutes and seconds hands separate. This allows us to save the Illustrator file and open it up in After Effects, keeping all the layers in place, and this is where it starts getting technical (sort of).

Once we brought the file over to After Effects, we made sure everything was aligned properly and ensured the anchor points (around which the item rotates) for each object were centred. 

The next step was to make the clock hands actually rotate. This was simply a case of setting the starting position for each hand 10 frames into the animation (see the first set of circles below), and then setting a finishing position for each one at the end of the composition (see the second set of circles, 100 frames in).

anchor point
key frames

Setting a different speed for each hand meant adjusting the amount of full circle rotations slightly for each. For example, the second hand has three revolutions and then rotates an extra 95°. The minute hand only has one revolution, and then rotates a further 210°. This makes the second hand move faster from its starting to finishing position compared with the minute hand.

After exporting the After Effects file over to Photoshop, we saved it out as a looping .gif ready to be displayed on the web. The finished product is a fairly basic, smooth clock face animation.

We then animated other icons, replacing rotation keyframes with adjusting set positions and opacity. A little bit of motion blur helps make everything look that little bit smoother. Good, eh?

careers animation

Imagine what we can do for you

Becoming proficient in a new piece of software is hard. Animation is really hard. We’ve learned a lot and are still learning new things each time we create a new composition using After Effects, but we’ve also discovered our animation capabilities.  

The great thing about this journey is that we’ve been able to create some cool new animations for our website and social channels, plus we have another great service to offer our clients. Animation attracts, engages and just looks really sleek. Can you envisage animation on your website? Or maybe you can’t but want to discuss the possibilities? Let us help your imagination run wild and your website come to life. Get in touch