Rectangle to slide out/expand?

May 30, 2017

Dawn Barker
By Dawn Barker

Hi everyone, I hope I can find an answer here. I was previously using Claro, and you could add a rectangle shape there, with a trigger so that when a hotspot was clicked, the rectangle would expand to reveal its full size and content. That is - initially, the rectangle would be tall and thin (say 600 px tall by 150 px wide) - but when clicked, the right hand side would slide to the right until the rectangle was 600 px tall by 800 px wide, with type overlaid that would scroll out and reveal itself with the box.

Is there a similar function with Storyline? I have tried various animations (fade in, grow, etc.) and motion paths - but I can't seem to find the same functionality. Thanks in advance for any help you can provide!

1 Reply
Martin Garnett
almost 7 years ago06/22/17 at 9:55 pm (UTC)

Hi Dawn,

You may already have an answer to this by now, but just in case you don't  - here's my 2 cents...

The way I would do this is with a little bit of trickery. Use 2 rectangles!

  • Draw your first 600x150px rectangle (rectangle1).
  • Create a new state... call it something like "Expanded".
  • In "Expanded", insert a new rectangle (rectangle2), this is your 600x800x.
  • Make sure this rectangle is ontop of the original, and of course, is the same style. (note: this won't work with borders on your rectangle...)
  • Now, select rectangle2, and give it an animate-in of wipe, and from the left.
  • You can even give it an animate-out animation of wipe from the right to simulate closing.
  • In rectangle2, you can add text to it directly by typing with it selected.
  • Now, setup your triggers on your button to change the state of rectangle1 to "Expanded" when clicked, and collapse when clicked again.

With any luck, it'll look something like the .story file I've attached.

Let me know if you have any questions.

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