Can you animate out an image/shape "on click" in Storyline? Or just based on the timeline? It seems like I should be able to do this fairly easily, but I can't figure it out. All I can do is add a trigger to hide the layer or change the state of the image to hidden when clicked. But I can't add animation out. Can anyone help? (Not sure I'm explaining this well.)
While there is no specific trigger to do 'animate in/out (presuming you're referring to fly-in/fly-out), you can use a trigger to 'fly-in" but not for "fly-out" by setting object to hidden initially.
Whichever object you're wanting to animate do two things first:
Set its animation properties
Set its initial state to "Hidden."
You'll need a trigger to 'Change the state of [object] to Normal when [user clicks, timeline ends, etc.). As soon as the object's state appears - changes to Normal - the assigned animation will initiate.
It works for fly-in as it pertains to the object's relevance to when the timeline starts. For "fly-in", whenever the object's state changes from hidden to normal the animation occurs regardless of where the timeline is.
Unfortunately, I've not been able to get "fly-out" to work due to the opposite nature of how the animation is tied to the timeline - flies out when the its position on the timeline ends or the timeline itself ends. Not before and not after.
That said, there is a way to trick Storyline.
Create two identical layers with the same object
Layer 1 - has your content, audio, other objects, etc. When you want to "animate out" an object on this layer, immediately Show Layer 2.
Set a trigger to "Show Layer 2..." when timeline ends or when activated by a button.
Layer 2 - create a static copy of Layer 1. Meaning, no audio, no animation. Just a mirrored image of the Layer 1 on what it would look like at the end of its timeline. Tip is to group everything on Layer 1 and copy/paste to Layer 2.
Set Layer 2 timeline to 1/4 or 1/2 second.
Set the copied group of objects from Layer 1 to all "fly-out". Since the timeline is only a 1/4 to 1/2 second, the animation will occur almost immediately.
One last trigger. On Layer 2 set a trigger to "Hide Layer" when timeline ends or "Show Layer [Layer 3] when timeline ends. Again, since it's such a short timeline the animation occurs and either hides back to the base layer or shows a new third layer.
Play around with a few simple shapes and triggers to understand the mechanics. Once it makes sense to you, then you can recreate that sequence as often as your designs call for it.
Weird thing is that I found that on the second layer I could just have the image fly out and I didn't need to add "hide layer" on click. I could just click on the base slide after the animation ended.
7 Replies
HI Laura,
While there is no specific trigger to do 'animate in/out (presuming you're referring to fly-in/fly-out), you can use a trigger to 'fly-in" but not for "fly-out" by setting object to hidden initially.
Whichever object you're wanting to animate do two things first:
You'll need a trigger to 'Change the state of [object] to Normal when [user clicks, timeline ends, etc.). As soon as the object's state appears - changes to Normal - the assigned animation will initiate.
It works for fly-in as it pertains to the object's relevance to when the timeline starts. For "fly-in", whenever the object's state changes from hidden to normal the animation occurs regardless of where the timeline is.
Unfortunately, I've not been able to get "fly-out" to work due to the opposite nature of how the animation is tied to the timeline - flies out when the its position on the timeline ends or the timeline itself ends. Not before and not after.
That said, there is a way to trick Storyline.
Play around with a few simple shapes and triggers to understand the mechanics. Once it makes sense to you, then you can recreate that sequence as often as your designs call for it.
Good luck!
Kevin
Hi Laura! Looks like Kevin is taking care of you here, just let us know if you need anything further.
Kevin, thanks for sharing the detailed explanation.
Excellent, thanks.
Glad that this thread was able to help you out as well Daniela :)
Great stuff, Kevin. Thanks!
Old tip. Glad you found it useful Victoria!
Weird thing is that I found that on the second layer I could just have the image fly out and I didn't need to add "hide layer" on click. I could just click on the base slide after the animation ended.
This discussion is closed. You can start a new discussion or contact Articulate Support.