Forum Discussion

CalebCummings-a's avatar
CalebCummings-a
Community Member
3 years ago

Flipping a card BACK to normal state

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!

 

 

storyline 360
  • JackieHa's avatar
    JackieHa
    Community Member
    3 years ago

    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!

  • LaurenConnelly's avatar
    LaurenConnelly
    Staff
    3 years ago

    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.

    • PatrikPuska-03c's avatar
      PatrikPuska-03c
      Community Member
      2 years ago

      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.

      • JoseTansengco's avatar
        JoseTansengco
        Staff
        2 years ago

        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!

  • Learning1's avatar
    Learning1
    Community Member
    8 days ago

    Hi everybody,

    This is my solution to this question.

    I created 2 extra layers to mirror the 2 flip cards I needed - pretty much like pointing mirrors at each other. Now they can be flipped back and forth indefinitely. 

    Make sure you uncheck "Hide the other slide layers" from each layer and that the layers are set to "Reset to the initial state". 

    Let me know if it worked for you! :)

    Ana-Maria G

    P. S. Jackie's solution worked for me, too! 

  • AnnaJevtovi-238's avatar
    AnnaJevtovi-238
    Community Member
    2 years ago

    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. :)

Related Content