How I started Motion Design using high-school Physics
Getting started with UX Choreography
As a motion enthusiast, there is one question that I have been asked the most:
“How do I start with Motion Design?”
To this, I often reply savagely, “You start with Physics”; scaring away most of the seekers 😂 But here is the thing — someone who is genuinely interested never stops with a single query. They follow up with questions after questions after questions. I love them! ❤️
Every week, I have slots blocked on my calendar only for the purpose of mentoring such enthusiastic people. I either meet them in person (if they are around Bangalore, India) or speak to them over the internet. I like doing it 😊
Well, my offline efforts are only limited to the folks who are in the vicinity of my circle. I am sure there are lots and lots of people in the world who would want to know the same. Hence, this post.
Physics is bae
When I say, “You start with Physics”, I am not completely wrong either. ‘Physics’ usually reminds us of the scary equations & formulas we have crammed back in school!
In reality, physics is way above all these complicated stuff on paper. It is how nature behaves, how objects move, how things fall and beyond.
e.g. Knowing when to raise your hand to catch a moving ball, and when to recoil it back so as to minimise the impact of the ball on your hand, is real physics.
This understanding of the real world is all the physics you will ever need to get started with motion design.
Making things alive!
Here is Snehal Patil’s representation of a Delivery Executive riding his bike, while wearing a Santa Cap. Cute, isn’t it? 😀
We can perhaps say that he is ‘riding’ the bike and not just sitting on it because one of his legs would, otherwise, be resting on the ground. But that is just a conjecture! How might we, make it more perceptible that the bike is not stationary but in motion? — The answer is Choreography!
Let’s start by doing the most-designer-thing ever:
Breaking down the problem into pieces — this time, quite literally!
Once broken down, each smaller component can be treated like a separate entity, animated individually and assembled together later.
The Choreography
I have identified 5 simple additions that will make this static illustration come alive. Let’s get started! 😍
1. The wheels will rotate (Obviously)
Rotation is simple! There is a ‘rotate’ option in After Effects and we simply add 2 keyframes a few seconds apart, with different values of angles. Then, we move the entire assembly of the chassis, wheels & the rider forward by a distance of 2(π)r, for every complete rotation of the wheel, as suggested by the laws of nature — phew! 🙄
Else, we can simply skip all these complications and try some effortless yet sophisticated technique. How about this? 😎
Looks very subtle, doesn’t it? Here, we are banking on 2 assumptions:
- The bike is moving fast, hence the spokes of the wheels are invisible.
- The surface of the wheels are naturally imperfect, hence the reflection is flickering.
PRO TIP: The flickering can be created using a simple white circle and the ‘Trim Path’ tool in After Effects.
This flickering does give a sense of motion but it is still far from reality. Let’s see the next one.
2. The chassis of the bike will heave
Even if we assume that the bike is plying on a smooth tarmac road (fairly unlikely in India 😛), there will still be a rhythmic up-and-down motion because of the shock absorbers. Something like this.
Feels a lot better, right? But it still lacks a few things.
3. The body of the rider will experience natural movements
The rider here is not a plastic body fitted inside a straitjacket. It is a human and should exhibit humanly movements. Think of what happens when you ride a motorbike. Different parts of your body experience motion relative to each other. e.g. The angle of your elbows may change, your neck and head may move, your back may stretch and bend etc. We just need to mimic some of these movements.
Do you see the additional movements here? If you do, then you have a designer’s eye 😃 These bits are very subtle but they add a lot of life to the composition. They clearly differentiate the lifeless food-box from the human, full of life.
PRO TIP: The body of the rider can further be broken down with each part on a different layer. The humanly movements can then be achieved by subtly moving and rotating these parts in After Effects. In the world of character animation, this process is called rigging.
4. The additional tids and bits
We all know that a Santa Cap has a loose end and when the rider is riding at high speed, it can never be rigid; It needs to flutter! So here we go 😇
This step of fluttering the cap is highly addictive and you may feel very tempted to overdo it. In fact, I too overdid it! 😆 But hey… controlled exaggeration is allowed.
PRO TIP: The fluttering is done by simply morphing the cap from one shape to another within a short span of time. It is much easier than it looks! 😃
5. The final touch
Hmm… Let’s see… The wheels are rotating like they should, the chassis is heaving like it should, even the rider and his cap are behaving just they way they should. But, there is still nothing that indicates that the bike is moving forward. This is perhaps the easiest of all the steps!
Either,
We move the entire assembly (chassis + wheels + rider) ahead.
Or,
We simply introduce a city scape and move it behind — Something that we learned from the computer games like Roadrash, Mario and Contra. Relative motion, you see 😄
See… We added so much life!
PRO TIP: It is very easy to create a forever looping background like this. You just need to have 2 copies of the same instance and stack them back to back. Finally, reveal only that section of the composition which forms the infinite loop 😊
I hope you learned something new today. To check out more things I do and discover, follow us on Dribbble.
If you are curious about Motion design, do check out:
- My Masterclass on Motion Design using After Effects for beginners
2. My podcast on nuances of Motion Design
3. My talk on Motion Design
Feel free to reach out to me. See you all in the next one 🙌
