Using a mask to hide an element and then reveal it as an animation

Hey guys,

Apologies if the subject makes no sense, I struggled to find a way to accurately describe what I’m trying to do here. So I’ve attached the icon below that I want to animate.

Essentially, I want the red arrow appear, or draw itself. So the first frame would imply be the white eye and the 360 text, the red lined arrow would not be there just yed. I Want to create an effect wear it loosk liek the red line isbeing drawn, starting on the right, wraps around behind the end and ends on the left with the arrow. The animation would just loop.

I’m just getting started with Hype 3, I’ve looked at some similar topics on here but I havent found exactly what I’m trying to do just yet. If you need more clarification or can point me to a good tutorial that would be great.

I’ve uploaded a transparent version of my icon and one with a black background so you can see what it’ll look like.


You could use a timeline and rectangles to reveal the arrow. Here’s a sample… (21.2 KB)

I left the borders on the the rectangle so that you could see them in action. Also the rectangles have the same fill color as the background. (I only did the first half in the sample)


Awesome, thank you for the quick response! I’ll peep this now :slight_smile:

This icon is going to be sitting over a background image. Is there a way to do this, with keeping that in mind? I apologize I didn’t include that detail initially.

Also, could you explain what your doing here with the objects and anything your applying to them. I’m noticing these origin left and origin top properties when I click the rectangles. What does that mean?

Hype’s online documentation webpage explains it best…

The background image will be a problem for this method, you might need a javascript library such as Vivus to do this…

1 Like