Motion’s Eleven – Motion design techniques

Author
Team Created
Date
13.05.19

Looking for some guidance on motion design techniques and trends to help you add some spice to your projects? Well, you’ve come to the right place…in the desert!

We wanted to have some fun with motion design techniques, so we created Motion’s Eleven (yeah we went there) – a series that’ll guide you through eleven different motion styles, all with a Las Vegas twist!

We’ll post each new style on our socials for the next few weeks. On this page, you’ll find out how they were created in After Effects, with commentary from our very own in-house designer Gianluca Alla.

#1 Movie Credits

Inspired by the iconic title sequence from Ocean’s 11, this looping GIF launches the beginning of our series.

How it’s done

Effects are not always needed to make engaging animations. Sometimes it’s just a matter of correct sequence of elements, basic transformation and timing that make the motion appealing. In this case, rotations and masks are the main characters.

The initial transition is made by regular keyframes’ shifting where the initial point is faster than the last. The 11 appears through a mask. The blue and yellow tiles change colour with a “3D rotation” (x-axis). The animation ends with a double transition on the shapes. In this case, the “scale” and “rotation” work simultaneously. Moving the keyframes with a constant rhythm, the shapes disappear one after the other.

 

#2 Glitch

Next stop we’ve got Glitch, a technique simpler than it looks to achieve. Tip: it’s a good effect to use if you need to change scenes quickly.

How it’s done

To create this effect, first find a stock video like this one, free for personal and commercial use. Place the video in the composition and create a new adjustment layer. Then add the “Displacement Map” effect to the adjustment layer and set the Glitch video as the map layer. It’s then up to you to play with vertical or horizontal displays to achieve the effect you want.

The Chips background is made with the Cinema 4D tool within After Effects, that you can find in the Composition Settings.

#3 Kinetic typography

This effect is actually really simple to create, but it ends up being visually impressive. Low effort and great results? Yes, please.

How it’s done

You can get this one by creating a new layer with a word, or a sentence. Activate the 3D layer and then play with 3D rotations on different axes, until you get a visual effect you’re happy with.

#4 Morphing

We’re witnessing logos and icons morphing more and more these days and it might also be because this technique is used by the biggest brands (Google being an example). Definitely a must-have in your motion design skillset.

How it’s done

To obtain a result like the one above, you need to place all the shapes you want to morph in separate layers. Put a keyframe on the path of each layer and then cut all keyframes, placing them on the timeline one after the other.

#5 Neon

Replicating neon lights is a sure-fire way to bring text to life with bright and vivid colours. It’s the go-to effect if you’re also looking to evoke some 80’s retro vibes, like the GLOW title sequence.

How it’s done

This technique is a bit laborious, but the final outcome is so worth your time and patience. Watch this tutorial to learn how to do it, step by step.

#6 Typography

Giving motion to typography gives it a whole new flavour and is a great way to give meaning to the message you want to convey. Need some inspo? Check out design agency Dia. They know a thing or two about moving typography!

How it’s done

You can achieve movement by positioning keyframes at regular intervals on the timeline. Next, apply a CC Griddler effect on the text. You can then play around with the effect parameters to reach a result you’re happy with. For more details instructions on how to add motion to text, check out this tutorial.

#7 Animated logo

Animating logos is a very powerful way to convey a message that text alone wouldn’t be able to. In a matter of seconds, it can tell the story of a brand, give life to their values, express an emotion. With the right amount of work, it can get very clever! Want some proof? Check out this article to find lots of examples of what we’re on about.

How it’s done

This effect is achieved by a tool called trim path, rotated with an anchor point at the centre of the composition. If you want to explore how to use this effect in different executions, check out this tutorial.

#8 Liquid

Another trend that’s been pretty popular in the past few years is liquid motion – you might have seen quite a few big brands use it in their commercials and promos.

How it’s done

This effect is very similar to #4 Morphing. The two cards are two separate layers that you move from the centre to the corners of the composition. Make an adjustment layer, give it a fast blur effect, set the blurriness to 50 and add the Simple Choker effect, set it 50 on the Choke Matt parameter and there you have it! For a more in-depth step-by-step guidance, check out this tutorial.

#9 Micro-interactions

Micro-interactions are everywhere when using your phone or laptop. They exist for a functional reason as they help you understand how to interact with your device. But they’re also there to make your user experience fun and engaging. That’s why they can get really creative – well thought out micro-interactions can give a user a positive impression about a brand, even subconsciously. A smooth, engaging experience leaves the user satisfied, not frustrated and with a sense of accomplishment. Definitely something you should always look out for! To learn more about micro-interactions, check out this article by the UX Collective.

How it’s done

In terms of designing, you generally don’t need hardcore tools or techniques to create micro-interactions. In the case of this one above, it’s just about timing and align mouse movement with the rest of the composition. If you want to make the swipe really fast, add a little bit of a vertical blur effect to it. Check out this tutorial to find out how to add a motion blur to your design.

#10 Retro

Need to take your work back in time, back to the good ol’ days of VHS and VCRs? 80s and 90s vibes are all the rage these days (Stranger Things anyone?) – that means it’s likely you’ll need to give your compositions a vintage look. You probably know the drill: you gotta get your good dose of grain in there, possibly some glitches and your classic VCR font.

How it’s done

Making this effect is actually pretty straight-forward. Start off applying a noise and grain effect to your composition, then add an off-set effect (which you can find under Distort) and play around with the blue, red and green channels until you reach a look that you like. Watch this tutorial for step-by-step guidance.

#11 Gradients

They might have reminded you of your 2001 WordArt school presentation up until a while ago, but gradients are literally everywhere right now. The influence of giants such as Instagram and Spotify – who decided to take this trend and incorporate it at the core of their branding – might have played a big part. Want to know more about how gradients blew up so much in the past year? Check out this article.

How it’s done

If you want to recreate the Gradient effect above, you’re in for a treat! The technique used is actually the same from #8 Liquid, just by applying different colours. Want to give your designs a whole gradient motion effect? Check out this tutorial.

Tune in every Monday to discover the rest of the techniques. Better yet, follow us on Instagram to ensure you don’t miss a beat.

If you want to kill it in motion design, get in touch with our Admissions Manager Kim to learn more about our courses and your opportunities with Created.

Related resources