Splash Screen Animation

As you can see in the GIF, we are changing the color of the text from black to green. This is done from right to left. Once the entire’s text’s color is changed, we then make this text disappear from left to right. The Vue Logo then scales up and moves to the left.

First let’s initialise a few things such as the name of the animations, duration and the direction of the animation.

Now, let’s take a look at the code for changing the color of the text from black to green.

Once the text is turned to green, it needs to disappear, starting from left to right.

The tricky part here is calculating the animation delay and telling the app to change the colour from right to left but disappear the text from left to right.

The animation delay Pattern is given by:

{ animation-delay: $n * 0.1s + 3s, abs($n) * 0.1s + 3s }

Here $n refers to the nth child element, 0.1s refers to the iteration step, and we are adding another 3 seconds.

Once the text has changed, The Vue logo scales up and moves to the left side of the screen.

To scale, I have simply changed the height and width in each stage of animation, then change the left position to move the logo to the left side of the screen.