Tab Bar Interaction v7

🎁Tips to create better interactions and understanding animation.
.
Here you can see the Tab Bar Interaction designed for an app.
.
👨🏻‍💻Interaction is made using Principle, which is a prototyping software for Mac.
.
🥇Before pulling off interactions in any prototyping software keep few things in mind and having knowledge in basic animation principles will help you a lot to understand how animation works.
.
🥈So How is animation done?
.
🎯Any object or layer created in any design software has many properties attached to them for example, color, size, position, anchor point, or even material properties like the shadow, glow, blur etc.
.
When any property is chosen and the value is changed over time, the transition happens between those changes. This is called Keyframing.
For example,
.
At time = 0 sec, Scale = 0 & Blur = 20
At time = 1 sec, Scale = 10 & Blur = 0
.
That means the object has two property changes going on in 1 second and it is unstable between 0-1 secs where it only comes to rest i.e. (scale being 10 and blur being 0) at 1st second.
.
This is called animation where the object will keep running for the stability and that depends on the keyframes.
.
Suppose,
.
At time = 0 sec, Scale = 100 & Blur = 0
At time = 1 sec, Scale = 100 & Blur = 0
.
Here you can see, in both the states the properties remain the same and there is stability. No values are changing and that means no animation between those properties.
.
These are just 2 properties for just 2 keyframes, imagine for 10 seconds of animation and lot of properties changing.
.
Hope you got something out from this. Love to share stuff with you all guys.

Have an amazing day!

My Design Process: Instagram!