Forum Discussion
Flashcard Animation in Storyline
I've created a number of Rise courses but after learning that's it's not fully accessible I'm switching back to Storyline, which is too bad. I like both programs but Rise is definitely faster to build and looks slick enough to impress. I really like the flashcard feature in Rise and I'm trying to figure out how to create an interaction in Storyline that looks like a flashcard being flipped over like it does in Rise.
I've looked at these articles: https://community.articulate.com/articles/4-flashcard-interactions-your-learners-will-love and https://community.articulate.com/discussions/articulate-storyline/how-to-create-objects-that-turn-over-like-in-rise-in-storyline-360 but while they're really great interactions I'm keeping for other scenarios, none of these mimic that flipping the card over motion. Some of the articles linked are 5-8 years old so the shared examples don't open in my Storyline (360). Does someone have any recent examples that haven't been shared yet?
Thanks! :)
Wow Math, you are amazing! So much effort done on this! Thank you so very much!
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.tocalls.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
