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. We also quickly discuss why we fade, rather than trashcan properties, and 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

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:20

  1. Create a circle
  2. Scale it to the size you want
  3. Change its fill color opacity to 0%

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 Orb

Now let’s make the orb.

This step starts at 1:18

  1. Create a circle.
  2. Scale it into place by pressing SHIFT.
  3. Turn its stroke width to 0

Easy. But! We performed the last few steps with Relative Mode off.

Selecting Keyvalues via a Parent Track

If you end up forgetting to turn on Relative Mode, and you don’t want any animations that you created, you can always click a keyvalue on a parent layer to select its underlying keyvalues.

This step starts at 1:42

  1. Open your animation to see all the layers.
  2. Click on the keyvalue, at 1s, of the timeline track.
  3. Press Delete.

Clicking the keyvalue of a parent layer select all the child keyvalues at the same time.

Rough-in the Orbit

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

This step starts at 2:05

  1. Expand the timeline to 2s
  2. Move the playhead to 0.5s
  3. Position the orb at the middle-right of the orbit.
  4. Move the playhead to 1.0s
  5. Position the orb at the bottom-middle of the orbit.
  6. Move the playhead to 1.5s
  7. Position the orb at the middle-left of the orbit.
  8. Move the playhead to 2.0s
  9. Place the orb its original position.

Now you should have a diamond-like 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:06

  1. On the Y track, delete keyvalues at 0.5s and 1.5s
  2. Hit Play

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 3:30

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

We’re getting very close.

The Hiccup

You’ll notice that there is a very small visual hiccup 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:03

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

There you go.

Tidying Up

Two small steps will put our animation its fina state.

This step starts at 4:45

  1. Turn on Relative Mode
  2. Change the orbit’s stroke width to 0
  3. Group the orbit and orb
  4. Rotate the group to 33°

Wham.

background Made with Flow.
underscore Made with Flow.
line2 Made with Flow.
line1 Made with Flow.
circle Made with Flow.
hit Made with Flow.

result(s) found for “”.