Different stop points on circular motion path

May 08, 2017

Is it possible to have different stop points on a circular motion path? I'd like to have some intro animation on a slide in which icons radiate out from the top point of a circle and move clockwise, each stopping at a different point along the circle so that at the end it will look more or less like this:

example of circular menu

I.e., all icons would start at position 1, then each subsequent icon would stop at the next place along the circular motion path as the rest continue around the circle. I don't see an obvious way to allow for different stopping points along a circular motion path, so I thought I might be able to create two versions of each icon - one that would move around the whole circular motion path (represented above by the light blue circle in the background) and another in the designated stopping place along the path. Then, if I can time it right, I'd have the moving icon disappear when it reaches its stopping point and the corresponding stationary icon appear at the same time. I have a feeling it would be hard to make that look smooth, though, so any other suggestions would be appreciated!

Thank you!

9 Replies
Leslie McKerchie

Hello Gracia and welcome to E-Learning Heroes :)

I'm no designer and I'm not quite sure what you'd like to happen with regard to the animation, but I'm sure some others in the community can pop in to share ideas with you.

When I see the image above, I could envision:

  • animating each of the icons in - perhaps in the order as you're showing
  • setting layers to display additional information as the user clicks
  • if you need it to be 'in order', you can even use states and variables to force the user to visit 1, then 2, etc

Good luck with your project. I look forward to seeing what others share.

Walt Hamilton

You're right, variations in browsers and buffering would make a smooth animation nearly impossible.

With the blue circle there as a guide, you can draw a freehand motion path along its outline to move each icon individually to exactly where you want it. It would work to time their start times to have the spacing you want.

David Anderson

Right on. I attached the source file so you can take a look. You'll see three different approaches. The one I liked best was using the Curve path.

Storyline 360 makes this type of animation a lot easier because the motion paths can be renamed.

I'll record a quick screencast to show how I built it.

This discussion is closed. You can start a new discussion or contact Articulate Support.