How to animate a card flip?

Sep 03, 2019

Hello everyone,

I want to animate a card that flips when the user clicks, something like a memory card. By just changing the states, the card has no movement and the animation paths in storyline starts with the timeline, not by a click. Is there a simple way to realize that?  

Really looking forward to your ideas! :)


25 Replies
Najam  Fazal

Here is one that I use for flipping cards. The sample includes a one-way flipping card and a toggling flip card. They used state and 'swivel' animation giving a flipping effect when clicked. For toggling, I used a T/F variable to conditionally switch the states on click.

Use one-way flip for knowledge checks or quizzes and toggle for matching or review activities.

I've seen and used some of the suggested flip card in the community but this one is my most used. Hope it helps other people.

Najam  Fazal

I've applied the "Swivel" animation in the revealed state. You can see that by selecting the square, go in state, edit 'revealed' state and see the animation tab in the Ribbon on the top.

By default, you cannot apply animation in a new state but there is a well known hack. Just edit the new state, click on the object, cut it and then paste it, you can now apply animations on it.

Michael Russell


I downloaded your sample file for the the card flip animation and I'm reading your instructions above and still cannot figure out, one how you created a new state named 'Revealed' and two how you hacked this state so you could apply the swivel transition animation to the card. Is there any way you could provide some more explicit instructions with screen shots perhaps? I'm really needing to creating this type of user interaction and need some assistance.


Jerry Donney
Why doesn't Storyline already have a Flip Card function built-in like D&D.  Why do we have to build it manually with triggers, states, animation, etc.  Rise360 has a  built-in Flip Card block/template, and so do many LMSs and other HTML editors.  Seems like a pretty universally wanted interaction type.  Does anyone know if this has this ever been sent in as a Feature requirement? 
Michael Lindner

Yes, please, make it a feature! This is really essential for an authoring tool, please add it to storyline. 

I had the problem with flipcards too and I could solve it. So here is my fix for storyline:

I am cutting the Swivel Interaction in two parts and added layers for the interaction going forward and backwards. The result looks quite similar to the rise Flashcards.