Create an Orbit Using Easing Curves

In this run-through, we create an orbit animation using easing curves and offsets for the X and Y positions of a layer. Then, we use groups to rotate the animation after we're finished.

You can Bruce Lee this and do the tutorial from scratch, or just dl the file and have look at how it’s done:

Orbit.flow.zip

Change the Scene Size

Let’s start by changing the scene size.

This step starts at 0:20

1. Create a new empty timeline
2. Change the scene size to 400 x 400

Create Your Shapes

We need 2 circles to make this animation.

The Orbit

We’re adding an orbit shape for visual effect – it will not actually be the motion path for the orb.

This step starts at 0:42

1. Create a circle
2. Rename it to Orbit
3. Change its fill color opacity to 0%
4. Make it’s stroke width 2pt
5. Scale it to 250 x 100

There’s no trashcan for turning a color (or any other property) on and off. The main reason has to do with animations. If at a later time you want your color to fade in, then it needs to start as the proper color in the first place.

Unlike Sketch, Flow has no trashcan for properties.

The Dot

Now let’s make the dot.

This step starts at 1:30

1. Create a circle.
2. Rename it to Dot
3. Scale it to 25 x 25
4. Snap the dot to the top of the orbit
5. Turn its stroke width to 0

Rough-in the Orbit

First, let’s get a basic animation path for the orbit by positioning the orb at key times.

This step starts at 2:06

1. Move the playhead to some time shortly after the beginning
2. Drag-snap the dot to the right side of the orbit
3. Move the playhead a bit further
4. Drag-snap the dot to the bottom of the orbit
5. Move the playhead a bit further
6. Drag-snap the dot to the left of the orbit
7. Hit play

Now you should have a diamond-like animation.

Distribute Keyvalues Evenly

Next, let’s balance out our animation by distributing the animations evenly along our timeline.

This step starts at 2:47

1. Area select all X-track keyvalues
2. Hit the distribute button at the top of the properties panel
3. Shift-click the last keyvalue of the Y-track to select all keyvalues
4. Hit the distribute button

Now the key moments of our orbit are evenly spaced throught the animation.

An Orbit is 2 Separate Motions

The way to think about an orbit animation is as 2 separate X and Y animations. If you time each of them properly, then the combination is an orbit-like motion. Let’s do it.

The Y Position

The animation actually starts at the top of the orb. So, for the Y position, we need only a single keyvalue at 1s.

This step starts at 3:26

1. On the Y track, select the keyvalue at 0.5s
2. Hit the delete key
3. Then, select the keyvalue at 1.5s
4. Hit the delete key again
5. Hit Play

When you delete a keyvalue, it may appear as though it is switching TO an easing curve icon. This happens when the keyvalue is directly between the two values to its left and right. The easing curve icon then gets redrawn in the center. So, they aren’t switching, it just happens to look that way.

We’re getting close.

The X Position

We need 2 keyvalues at the points where the orb is at the left and right edges of the orbit.

This step starts at 4:22

1. On the X track, select the keyvalue at 1s
2. Hit the delete key
3. Hit Play

We’re getting very close.

The Blip

You’ll notice that there is a very small visual blip of motion as the animation loops. This is because there are ease-in-ease-out curves between 1.5 > 2.0s and 0.0 > 0.5s. Over the course of the “looping” interval from 1.5 > 0.5s there are 2 curves.

This step starts at 4:55

1. Change the easing curve for the interval 1.5 > 2.0s to ease in.
2. Change the easing curve for the interval 0.0 > 0.5s to ease out.
3. Hit Play

There you go.

Tidying Up

Two small steps will put our animation its final state.

This step starts at 5:32

1. Insert a layer
2. In the hierarchy panel, drag the dot and orbit ONTO the layer to create a group.
3. Turn on Relative Mode
4. Select the group
5. Rotate the group to 33°

Wham.