I know how to add an animation when showing a layer (using transitions), but how do I add an animation when hiding a layer? Transitions only seems to be working when showing a layer and not when hiding (?).
Give every object an exit animation, then pause the layer timeline before the animations begin. Set the layer to hide when its timeline ends. Set the trigger to resume the timeline, rather than hide the layer when the learner takes the action that hides the layer,
I did what you describe and almost everything works. The only problem I have, is that the timeline isn't paused when it's shown. Do you know how to stop the timeline of the layer? I searched for a solution, but couldn't find it.
The trigger says to pause the timeline of the layer "when the timeline starts." That means nothing on the layer will show until the timeline is resumes. But the timeline can't resume, because the button for that doesn't appear.
The attached file changes the trigger to do what Walt said: pause the timeline "before the animations begin." For easier updating, I added a Cue Point to the timeline immediately before the exit animations begin. The pause trigger is set to run when the timeline reaches that Cue Point.
Also, to ensure the fade out happens right away when the resume-timeline button is clicked, I moved its start point to shortly before the Cue Point.
BTW, Hover is a built-in state. Any object with a Hover state will automatically change to that state on mouse over. Triggers that duplicate that action often cause problems.
You're also doing more work than needed. You can add text directly to a shape. Or format a text-box so it looks like a rectangle; simply adjust the fill and margins, as needed. You can also insert icons directly into the state(s) of an object. These are handy tricks to use so you only have one object to work with, instead of adding the same triggers to multiple objects. Examples of this are also in the attached file.
I tried to open your storyfile (six times: in Articulate Storyline & Articulate Storyline 360), but everytime it says "This project is invalid or corrupt and cannot be opened. It may have been created in an earlier version of Storyline". I use the latest version of Storyline and I guess you too, so what can we do about this?
Hmm. Not sure why you can't open the file. I downloaded the attachment, and it opens for me (using latest version of SL).
I imported the slide into a new .story file, which is attached. I hope you'll be able to open that one.
Just in case, here's what the edited layer looks like.
Pause trigger runs when timeline reaches cue point 1
"button-Terug" is what I renamed the clickable text box. It won't appear until shortly before cue point 1.
This screenshot shows the Format Shape window for the "Feedback" text box. I adjusted the alignment, margins, and autofit to make it look like the shape-plus-text-box button you had. I also gave it a solid fill.
The layer now works the way I want: it open and hides with a small animation!
The only difference between my solution and yours, is that in my solution the button 'Terug' always stay visible. This is how I want it to behave.
My (hopefully) very last question: how do I reset the loop that I created for the information icon to pulse 4 times? It should loop 4 times, every time someone clicks on one of the radio buttons.
Good tips to use one shape for the buttons and to use less groups!
8 Replies
Give every object an exit animation, then pause the layer timeline before the animations begin. Set the layer to hide when its timeline ends. Set the trigger to resume the timeline, rather than hide the layer when the learner takes the action that hides the layer,
Hello Walt
I tried what you describe: it partly worked, but it also became too big of a mess. So I decided to keep the default transition.
Having said that: thanks for thinking along!
Hello Walt,
I did what you describe and almost everything works. The only problem I have, is that the timeline isn't paused when it's shown. Do you know how to stop the timeline of the layer? I searched for a solution, but couldn't find it.
Hi, Jeroen,
The trigger says to pause the timeline of the layer "when the timeline starts." That means nothing on the layer will show until the timeline is resumes. But the timeline can't resume, because the button for that doesn't appear.
The attached file changes the trigger to do what Walt said: pause the timeline "before the animations begin." For easier updating, I added a Cue Point to the timeline immediately before the exit animations begin. The pause trigger is set to run when the timeline reaches that Cue Point.
Also, to ensure the fade out happens right away when the resume-timeline button is clicked, I moved its start point to shortly before the Cue Point.
BTW, Hover is a built-in state. Any object with a Hover state will automatically change to that state on mouse over. Triggers that duplicate that action often cause problems.
You're also doing more work than needed. You can add text directly to a shape. Or format a text-box so it looks like a rectangle; simply adjust the fill and margins, as needed. You can also insert icons directly into the state(s) of an object. These are handy tricks to use so you only have one object to work with, instead of adding the same triggers to multiple objects. Examples of this are also in the attached file.
Hi Judy,
I tried to open your storyfile (six times: in Articulate Storyline & Articulate Storyline 360), but everytime it says "This project is invalid or corrupt and cannot be opened. It may have been created in an earlier version of Storyline". I use the latest version of Storyline and I guess you too, so what can we do about this?
Thanks for your helps so far!
Hmm. Not sure why you can't open the file. I downloaded the attachment, and it opens for me (using latest version of SL).
I imported the slide into a new .story file, which is attached. I hope you'll be able to open that one.
Just in case, here's what the edited layer looks like.
This screenshot shows the Format Shape window for the "Feedback" text box. I adjusted the alignment, margins, and autofit to make it look like the shape-plus-text-box button you had. I also gave it a solid fill.
This post has more info about avoiding Groups: TIP: Making icons easier to program and easier to click - Articulate Storyline Discussions - E-Learning Heroes
Or , for a demo about avoid groups, go to 38:50 in this YouTube video: Gee, Storyline: Tips & Tricks to Improve Development. DLF Mtg. 2/13/2023 (youtube.com)
Hi Judy,
Again: thank you very much for your help!
The layer now works the way I want: it open and hides with a small animation!
The only difference between my solution and yours, is that in my solution the button 'Terug' always stay visible. This is how I want it to behave.
My (hopefully) very last question: how do I reset the loop that I created for the information icon to pulse 4 times? It should loop 4 times, every time someone clicks on one of the radio buttons.
Good tips to use one shape for the buttons and to use less groups!
I found how to reset the loop!
It works now!
Thanks for all your help!!