Marching Arrows


I am pretty new to Hype and am trying to make a simple animation of a set of marching arrows along a path. I want the arrows to be continuously moving around the path. It seems pretty simple to make an object follow a path but how do this?

This video might help:

This video shows how you can use a vector shape and then animate along its path. You will need to create a Timeline Action at the end of the animation if you want the animation to loop (Which restarts the timeline), but other than that this should be pretty straightforward. The timeline action should be set to ‘Start Timeline’ at the point when your arrow has returned to its starting position and done a complete loop.

Thanks, Daniel,

I understand the concepts in the video - and I just figured out how to make a linear move vs an “Ease in Out” move but I still don’t understand if Hype can do what I need it to.

A picture is worth a thousand words so hopefully, the illustration I uploaded will help you to understand what I want to do. I want the arrows to continuously move across the black rectangle.

The rectangle acts as mask for the moving arrows. When even a little part of the arrow moves outside of the black rectangle, that part will disappear (like shown in the image on the right). I want an infinite number of arrows constantly moving from right to left inside the black rectangle.

Can Hype do this? If so how?

I think this would be best as a repeating timeline (looped, by setting a Start Timeline action at the end of the timeline). You can then set the black rectangle to have a ‘content overflow’ hidden property so objects that are in the group but outside of its bounds are hidden: (29.1 KB)

Thank you Daniel. That is exactly what I am looking to do. Now I would like to run this animation on an infinite loop while I am doing other, non-looping animations. I tried using two timelines but it seems I can only play one timeline at a time. Scenes does not seem to do this either.

What is the best way to accomplish this? Export my marching arrows to a video and then import it back into a new project? If so is there any preferred format for the video?

Hei Steve,
you can do the following: Just mark your group containing the arrow animation and convert it to a Symbol. Since symbol timelines are stopped by default, you have to start it with a symbol action on the main timeline.
Or you cut out the arrow animation, create a new timeline and paste the animation there. Start the new timeline ‘on scene load’. You can run as many timelines at the same time as you want to.
Have a look at the attached hype file.

Best regards, Kalle (42.9 KB)


I don’t see how your example does what I want. I would like to loop infinitely while in a non looping timeline doing other things. Am I missing something?

Yes, your are - definitely :smiley: Look at the example - for the sake of simplicity I reduced it to the timeline version: There are three timelines: ‘arrowLoop’ - your looping arrows - ‘circle’ and ‘square’. Each timeline contains it´s own animation. While ‘arrowLoop’ is playing continuesly, you can start the timeline ‘circle’ and/or '‘square’ - your ‘other things’ - by clicking the buttons.
I would give you the advise to read the timeline part in the documentation in depths, because being able to handle timelines is a very basic skill for getting along with Hype. (32.9 KB)

1 Like