Adding a Trigger to Hide a Scrolliing panel

Aug 08, 2016

Hello,

I added a panel that slides out smoothly to show the course transcript. The panel is activated when the user clicks a button on the page.

I've put the panel on a separate slide layer. On some slides I need a scrolling text box for longer transcript text.

When the user clicks the close button, I can do one of two things:

1. Abruptly hide the entire layer, which isn't smooth.

2. Have the panel slide back in the some direction it slid onto the page

I would prefer to use option 2. The problem is that I cannot apply an exit animation to the scrolling panel, or a trigger to hide only the scrolling panel, while everything else slides back.

Does anyone have a script or know of some other way I can apply an exit animation to the scrolling panel, or a trigger to hide only it while everything else slides back smoothly?

Thank you.

9 Replies

Brian Dennis

over 7 years ago08/08/16 at 6:26 pm (UTC)

Motion path?

Leslie McKerchie
Staff

over 7 years ago08/08/16 at 6:38 pm (UTC)

Hi James! Looks like Brian has popped in to assist here and I just wanted to share some documentation.

Here's how to add entrance animations, exit animations, and motion path animations in Articulate Storyline.

Brian Allen
Hero

over 7 years ago08/08/16 at 7:23 pm (UTC)

One little trick I've picked up is how to activate entrance and exit animations on objects (not layers) by controlling the objects normal and hidden states.

If I have an object whose state is hidden by default, and apply an entrance and exit animation to that object, when I trigger the objects' state to become normal the entrance animation will play. When I am done with the object and trigger it's state back to hidden the exit animation will play.

This can be done several times for the same object on the same slide.

Unfortunately you can't adjust the states of a scrolling panel.

To work around this you can create an object on your scrolling panel layer as a container for your scrolling panel. Create a custom state in your object. Build your scrolling panel on a separate slide or layer, copy it, return to the custom state in your object and paste it into the custom state, resize if necessary, etc.

In the attached example I have open and close buttons. The open button shows the scrolling panel layer which has a trigger to change the state of the object to the custom state when the layer's timeline starts, triggering the entrance animation. Once the entrance animation is complete I pause the timeline of the scrolling panel layer.

The close button changes the state of the object to hidden, triggering the exit animation on the object and I have a trigger on the layer that hides the layer when the exit animation is complete.

Here's a link to the Demo - https://db.tt/IwytyyVU

Storyline file is attached...

Hope this helps, have fun!

ScrollingPanel.story

James Johnson
Author

over 7 years ago08/08/16 at 9:53 pm (UTC)

Brian, you're awesome.

I've got that part working. However, I'm trying to modify it a bit.

In the file I've uploaded, I have the close button on the base layer, however, I would like to put it on the Show Transcript layer, on top of the Sliding Panel.

The problem is that when I do that, for some reason the Scrolling Panel state on the Sliding Panel won't show.

Can you help me figure out what I'm doing wrong? I've been testing your instructions on slides 2 and 3 in the project.

As a side note, this is an older project to which I'm doing minor updates. But I plan on using this sliding menu when I fully revamp the project as well.

Thank you again. I really appreciate your assistance.

GLBA_Test.story

over 7 years ago08/09/16 at 1:05 pm (UTC)

James, you're really close, and I really like your hamburger-style button for the panel, but you're running into a couple of little flukey parts of this workaround.

The first is that you technically can't insert (from the SL menu) a scrolling panel into a custom image state. What you can do, however, is create the scrolling panel and add your text outside the custom image state (like on a slide layer or something), then cut and paste your working scrolling panel into your custom image state. It *should* maintain its functionality when inserted this way.

The second problem is with the close button on your sliding panel image. Hard to get triggers to work inside custom image states. What I did instead is add a hotspot to your slide layer in the same place your close button is going to be, with a trigger to change the state of the sliding panel image to "hidden" when clicked.

Check out the updated .story file attached and let me know if this is what you're trying to do.

Brian