Create awesome animations
In this short article, we are going to build a Viber look-alike splash screen with a Viber logo simple animation.
Here’s a sneak peek at the final output:
Now let’s get started.
Design of the screen is pretty simple as shown in the below gist. It consists of an icon, some text and a button — just like most login screens.
The most important thing is animation.
We need to break this animation into a few parts. As we can see in the final result (at the end of this tutorial), we need 5 moving parts.
The first part is the base image of the Viber logo that needs to be static.
Next, we have 5 parts that are moving, the logo circle, logo phone, and three curved lines one by one. All of these images are combined into
For each of these images, we will apply scaling with offset movement with
easeIn animation. The only difference is the duration of animation for each image and the delay of animation. Delay will be applied for the phone logo and three moving curved lines as the circle logo is the first image that we are animating.
And the final result is:
That is it, hope you have enjoyed this short tutorial, and stay tuned for more content.
As always, code is available on the GitHub repository: