Skype Logo

In this Skype logo animation tutorial, you’ll learn about multiple rotations that you can set up in Sketch.

First…

Grab the icons.sketch file

Layout in Sketch.

On the Skype page in icons.sketch, you’ll see two artboards. On the left is the start state – which has a tiny little s and a tiny little bubble – and the right is the final state.

Skype States

Create a Flow File

Create a Flow file with the start state at t0 and the end state at t1.

Twitter Flow File

NOW HIT PLAY!

Skype Default Animation

Rotationnnnnnns in Sketch

Did you see that double rotation? You can set large values for rotations in Sketch, but when you save / close / reopen your sketch file it will say 0. However, in Flow we see that you’ve rotated by a lot and will make it happen for you.

Animate!

To make this animation nicer, we’re going to shorten the rotation of the bubble, and give the s icon a little nudge. Follow these steps.

  1. Move the playhead to 0.0
  2. Change the opacity of the bubble to 0
  3. Grab the last keyvalue of the opacity track and drag it to 0.1
  4. Change the opacity of the s icon to 0 (at t = 0) » this creates a new opacity track
  5. Grab the first keyvalue of the sIcon’s parent track, and drag it to 0.5
  6. Shorten the opacity track to a tenth of a second 0.1s
  7. Move the playhead to 0.8
  8. Select the s icon and change it’s rotation value to -5
  9. Move the start / end keyvalues of the rotation track to 0.7 and 0.9 respectively

The final timeline should look like this.

NOTE: You can remove path tracks if they show up by right-clicking the track title and selecting delete.

NOW HIT PLAY!

Skype Logo Walkthrough

❤︎