Flipping a card BACK to normal state
Oct 14, 2021
Hi everyone,
I watched this YouTube link to learn how to flip a card in Storyline 360. It was pretty helpful, if not a little complicated. I have layers set up that correspond to each of the cards on the slide. In order to animate the cards (swivel), I had to add a "hidden" state on the new layers for each card and then added animation for each. The only problem, is that I would like to know how to add an additional action of flipping the card back to the original (normal) state. I thought I might be able to just add even more layers and then set the states in reverse order, but it doesn't appear that the triggers will let me use "hidden" again.
Does anyone have a better solution for this issue or maybe a suggestion of how I might be able to go about all this differently? I read a post earlier from someone who customized their own "revealed" trigger function, but they didn't thoroughly explain how to create that state with an additional variable.
Thank you!
6 Replies
Hello Caleb!
I'm happy to help! You'll want to add two triggers to the layers; one to change the state of the rectangle on the base layer to Normal and one to Hide the Layer when the user clicks the rectangle.
I've attached a sample project! Let me know what you think.
Hello,
I watched the video that you linked and made some changes to how you flip the card and flip it back. You will not need to create more layers than the amount of cards that you have :)
For each card, add a new state called "Flipped" (or really whatever you want to call it) and while you're in the "Edit States" mode, edit that state to be the back of the card. The "Normal" state should be whatever you want the front of the card to be. The triggers for the base slide will look the same as in the video.
On each layer, give the card an Entrance and Exit animation. Create a cue point on the timeline that is the same duration as the exit animation away from the end. For example, if your exit animation is 0.75 second, and your timeline ends at 5 seconds, then the cue point should be created at 4.25 seconds. Similarly to the video, make sure that the Slide Properties for each layer has "Hide other slide layers" unchecked.
Your triggers on each layer (that is not the base layer) should look like this.
The first trigger changes the state of the card on the base slide from Hidden to Normal. Originally, I had it change when the Exit animation completed, but I think it looks a little better this way.
The trigger that pauses the timeline when the Entrance animation finishes is there because if we let the timeline continue, then the Exit animation will play automatically, which is not what we want. I'll attach a template of what I've done.
Hope this helps!
Hi Lauren!
Thank you for sharing sample doc, it is very helpful.
My question is: I followed all directions and the flipping animation seems to be working perfectly, BUT, when clicking on the card again, the card (object) just disappears on my slide instead of going back to initial state like it is in your sample. Do you know what might the issue causing it? All layers and all triggers on my slide look exactly the same like in your sample.
Thank you.
Hello Patrik,
Happy to help!
If you could share a copy of the project file that you're working on, I'll be glad to compare it with Lauren's example so we can get both files to behave the same.
You can upload it here or open a case with our support team if you prefer to share the file privately. We'll delete it when we're done!
Hello!
I also watched the video to create the flipped cards effect in Articulate, but I don't know how to set up the option to toggle them back and forth.
If someone knows how to do this, I would appreciate your help. :)
Did Jackie's method not work for you?