Principle Tutorial Circular Motion Spinner
Principle Tutorial Circular Motion Spinner


Hey, in this video, I’m going to show you
how to create a spinner using a circular trajectory. Let’s get started. Create a square and place it at the center
of your artboard. We’ll set the opacity of this square to
0 in a second, but first, let’s use it as a baseline to align our circles. Create another square and increase the radius
significantly until it forms a circle. Align the center of it to the corner of the
square. Duplicate it a few times to create the rest
of the spinner. Let’s set the initial spinner color to be
purple. Move each of the circles out by an equal amount
to give a bit of breathing room. Set the opacity of the square in the middle
to 0. Then, group all five objects together in a
folder and label it ‘Spinner.’ Create a tap gesture over to a duplicate of
the artboard. Let’s set this next spinner color state
to blue. On this new artboard, set the angle of the
entire folder to 360 degrees. The rotation is a little fast, so let’s
extend the timing to .75 seconds. Let’s do the exact same thing to a new artboard
using the auto transition this time. Change the color of this spinner to turquoise,
and set the folder angle to 360*2 so that it will make one more full rotation. Create another auto transition from the turquoise
spinner artboard to a yellow one. This time the folder angle should be set to
360*3. If you like the pause in between color changes,
leave the transitions at the default curve. Otherwise, set them all to be linear for a
consistent spin and color change. Now let’s add an entrance animation. Duplicate the first artboard by creating another
tap transition from the purple spinner artboard to itself. Change the color of the spinner on the first
artboard to pink. Then set the pink spinner folder to an angle
of negative 70 and a scale of 0. Since this is an entrance animation, let’s set the curves of all the property transitions to ‘Ease In.’ Don’t forget to add the auto transition
that got deleted between the purple and blue spinner artboard transition back in. Let’s move on to the exit animation. Duplicate the yellow spinner artboard using
an auto transition and change the last spinner color to orange. To be consistent, let’s set the scale to
0 and add 70 degrees to the current angle position. We’ll also need to change the transition
curves to “Ease Out” and minimize the transition time to .3 seconds. Lastly, let’s create an auto transition
from the last artboard back to the first, so that we can run through the animation more easily. That’s it!

6 thoughts on “Principle Tutorial Circular Motion Spinner”

  1. Fernando San Martin says:

    Learning lots. Thank you! Very good that the videos are well structured and short.

  2. Daniel M says:

    Awesome, thank you so much! Very helpfull

  3. xxxhdpi says:

    Dope!! Thanx!!

  4. Inaki Lajas UX, UI Designer says:

    you are good. thanks for sharing

  5. Jennifer Ward says:

    Very good lesson

  6. Joe Morris says:

    What I love about your tutorials is that not only do you create a quality animation, but you also shine a light on the quirks of Principal. Nice work!

Leave a Reply

Your email address will not be published. Required fields are marked *