# How I started Motion Design using high-school Physics

## Getting started with UX Choreography

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!

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? 😎

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

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

## 3. The body of the rider will experience natural 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

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 😄

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

## Swiggy Design

Musings & Perspectives of the Swiggy Design Team

Written by

## Saptarshi Prakash

Designer | Traveller | Speaker | Teacher | Engineer | Manager

## Swiggy Design

Musings & Perspectives of the Swiggy Design Team

## How Do Others Experience You?

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