How I started Motion Design using high-school Physics

Getting started with UX Choreography

Saptarshi Prakash
Jan 16, 2019 · 6 min read

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

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!

A simple illustration of a Delivery Executive riding a bike

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

1. The wheels will rotate (Obviously)

Else, we can simply skip all these complications and try some effortless yet sophisticated technique. How about this? 😎

Bike with wheels rotating

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

Bike with wheels rotating and chassis heaving

Feels a lot better, right? But it still lacks a few things.

3. The body of the rider will experience natural movements

Bike with wheels rotating, chassis heaving and rider’s body moving

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

Bike with wheels rotating, chassis heaving, rider’s body moving and cap fluttering

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

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 😄

The final one.. Yay!

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:

  1. 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 🙌

Swiggy Design

Musings & Perspectives of the Swiggy Design Team

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store