Make arrow longer to show decrease?

Good Morning Everyone!

How do you make a shape (in this case, an arrow) animate from the original to a long version in Storyline 2?

I have a graph in Storyline where I want to show a decrease from the top left corner to the bottom right corner.

I have a motion path for an arrow to go from top left to bottom right, but the arrow stays the same size.

I want to keep the "tail" of the arrow at a fixed point but make the point of the arrow move downwards, increasing the tail length of the arrow.

I checked a couple of forums but could not find the answer.

Thank you!

5 Replies
Nicole Legault

Hi Kyle!

Thanks for posting your question! So, here's one way to achieve the effect (I believe) you're looking for: 

What I did is hide a blue rectangle shape, the same size and color as the straight part of the arrow, and placed it behind the arrow shape. I then added a motion path to the arrow that moves the arrow shape forward in a straight line when you click the button, then revealing the blue rectangle hidden behind it, and making it appear like the arrow is growing but the end point is staying in the same place. I've attached the .story file so you can take a closer look. Hope this is what you were trying to achieve and is helpful for you :) 


Kyle Kirkland

Hi Nicole!

Thank you so much for your response.

Correct - That is the effect I am looking for.

However, I am still learning how to do "states", which I assume this is.

Where could I go to learn more about editing/hiding states, so you do not have to type out all of the instructions?

Nicole Legault

Hi Kyle 

This does not use any states at all. It just uses two shapes: an arrow shape, and a rectangle shape. And it also uses a motion path on the arrow shape. Which is activated by a "Trigger" on the button. You can open up the .story slide to take a closer look. There's no states in this interaction at all. However, to learn more about states, here's a helpful tutorial:

Adding and Editing States in Articulate Storyline 2

To help you further, here's a little Peek recording I did that demonstrates how I created the arrow with the growing animation: 

Hope the video helps :) 

Kyle Kirkland

Hi Nicole!

I guess my confusion is how you “hid” the rectangle before the arrow’s motion started and how you synced that up with the arrow to give the appearance of it growing.

I’ll search for some more resources (hate for you to keep going back and forth).

Thank you for all of your help!