Flashcard Animation in Storyline

Gonna post it step by step, so you see how you can get this done yourself next time.

First thing to change is this parameter in the scripts:
transformOrigin:"center center",
Changing that to:
transformOrigin:"top left",

Run it and you will see it now transforms from the top left point. Doing this for now only on 1 card.

Then add a parameter into the gsap.to calls.
scale:2

Do this foir both the cardFront and cardBack...
Then publish and test...

As you notice, the card turns and scales nicely, but turning the wrong direction... 
And i can imagine you want it turning on the center as before... so lets get that done too...

So lets change the transformOrigin to 'top center'' for back and frontCards.
If we use 'top center'for card 1 and 2, and 'bottom center' for card 3 and 4... they all nicely align to the top... however we do need to fix the x-position. On the backcard offcourse we add 'scale:1' to reset a card when clicked.

Here you can see what we got so far...
https://360.articulate.com/review/content/fe4fdf42-e676-4e24-9352-7791462d0588/review

As you notice when testing... the z-Index of the cards is lower then the other cards. In my original solution i had a CTRL to change the z-indexes of turned cards, apparently you removed that :-)
So whats to do for the next steps ?

- change the z-Index of the turned cards so they show above all others
- reposition the turned cards so they are aligned to the rest
- scale it a bit more then 2, as that doesnot cover all other cards