Icon Animation
Hover over the Icons to see the animation.
*scroll down to see the entire icon set
In order to animate icons we need extra space which is why we add padding to the final icon design lock up.
Padding
-
Padding of X/8 will give enough space to animate and will also keep it tight.
-
Increasing it too much will give good room for animation but will have a lot of empty space when static.
Less padding less room to animate.
More padding too much empty space
Final padding balancing
both
Final padding of x/8 where x is the width of the Icon design
x
--
8
x
--
8
x
Segregation
The whole idea of branding to make everything cohesive and one unit. But when you have a library of icons that vary vastly we need to make sure we bring them into one look alike animated versions. For this we segregate all the icons into different categories based on their visual appearance.
In our case we have divided the icons into 3 main categories based on the number of individual moving parts/layers .
Freshworks new branding mainly relies on the idea of transparency and overlapping.
So we have applied the same ideology to motion.
Motion
File length & size
-
Animation of icon - 1 sec
-
Hold on icon - 3 sec
-
Total Gif duration - 4 sec
94kb
500x500
padded
Gif size.
