Flashcard Animation in Storyline

Math Noterman has an example of a flip card made in Storyline on his profile page. He does not say how he created it but you can check out his profile here and if you like what you see I’m sure he would be happy to share how he did it.

https://community.articulate.com/users/MathNotermans-96c9568e-8010-446f-af9c-a9ff4765e65a

Ahhhhh, that's the best, it's perfect! :) Thank you! Also thanks for answering so quickly! 

You are welcome!

Offcourse its made with GSAP. ;-) And as Storyline now includes the latest version of GSAP its easier then ever to create animations and interactions like that with Storyline. As im in the process of creating a sample/tutorial for another community member on how to work with GSAP in Storyline i will enhance that one with the flipping sample. 

The old version on my profile page still used jQuery and externally loaded GSAP. As that is not needed anymore i removed that from the Storyline file and reworked it so it only uses Vanilla Javascript.

Basically it works like this...

On start of the timeline all is set to its initial state. With queryselector getting all the needed elements, then hiding whats needed...lastly hiding the blocker. Showing that in this screenshot... blocker moved on purpose so you see the texts...



Then all cards and backcards have Javascript triggers.

Basically all the cards do the same more or less. With gsap.set some values are set directly so you donot see any change on screen. Then with gsap.to the animation is triggered... basically a simple perspective rotation 'rotationY' with some eases. To ensure all is properly visible i exchange the z-order of the different elements. For that i added a changeMan element ( the small block on top ) for each card. Its invisible, but used to control the z-order of the elements. So when the card is turned indeed the backside is showing on top in Storyline.
Do copy the code to a code-editor like Sublime Text with color coding, else you go bananas trying to get this right straight in Storyline. As seen below.



I add the working Storyline as a NewYears present ;-) ..if you need help...shout...
Happy coding in 2021

Really Nice Math, are the cards animating slightly differently? I much prefer the animation on card01

Math just one thing if I use the Modern player and scale the browser the objects move and resize  when animating is there any fix for this?

Yeah...Modern and Classic player behave quite different especial on x transformations. I did write up quite some upon it and do have fixes for it. This one was older, so its not in yet i guess.
Using % instead of pixels might help... vw and vw do work too in GSAP... Basically the y rotation might be different indeed depending on values...

If needed i can update this...

Thanks I have muddled through and refined the animation to what I want (I like things a bit faster). I will have a play with sorting out the movement in the modern player. 

Math, this is amazing, I had no idea it was possible to add javascript like that. We've been emailing, but I just wanted to "publicly" thank you as well. :) I'm super grateful! 

I am in way over my head, I had hoped that perhaps I can identify which element in the code does what, but javascript is quite a bit more complicated to unravel the very minimal html I can read….

I only need the flipping cards, no text or anything showing up below it, so I removed those elements from the timeline.

I tried to make the rotation a bit faster, like Phil said he did, but I ended up making the card flip super fast and then just sort of replace itself with the backcard, so I undid all my changes. The speed is fine as is. :P 

But I did also find the same issue with the resizing Phil mentioned. When i test the output at full siz it's great, but if I make the window smaller, the animations disappear off screen. Would you mind telling me which elements in the java script for the cards I need to change to use % instead of pixels as you mentioned above? 

In other posts on the community fixes for this i show as do some other members. I dive into it and fix of.

As promised here is the solution for the Modern Player and resizing the browserwindow.

https://360.articulate.com/review/content/1dc3a53b-b41d-4544-b78f-f803667ed4af/review

Only the card with the red cadre around it has it implemented. When time permits i will rework the complete flipping card example to work as needed...but resizing the page/window and then flipping the card with the red cadre and you see it stays nice at its position...in contrary to the rest.

I will give a proper description how it works and what code you need from it to get it working on other projects. But for now here is the working sample too.

Finetuned it a bit, so basically there is now a variable called flipDuration. You can change that to influence the duration/speed of the flip. Also got rid of the 'events' needed in the previous one..checking the resizing of the window. Now all in the scripts on the cards.

Wow Math, you are amazing! So much effort done on this! Thank you so very much!

Hi Math

Firstly, thank you. I have found a number of your solutions and downloads invaluable.

I have attached a card flip template here, that I created using your javascript from the example above.

This is just a template that I have used to create many slides with one or more card flips. However, it also serves as a great example for what I am about to ask.

I need to add some script that enlarges the card to just over 200% and moves the card so that the top left corner aligns with the top left corner of the first card in the grid (basically I want to cover all four cards with the enlarged card).

I don't know enough about java script coding to know how to do this but was wondering if it is possible?

On a side note. I created an animated gif that does exactly the same thing and it works fine in storyline preview but when I publish it, the animation is not smooth and keeps stuttering or fails to stop in the correct place (it stops before the animation is complete).

Would you (or anyone else that reads this) know why that is happening and how to stop it?

Thanks again.

Will check and fix it...

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

Next step...
first i add a variable for the scale... A number set to 2.5
As it is a Storyline variable i need to add this line to each Javascript trigger to get that value.
var player = GetPlayer( );
To get the variable for the scale i use this code.
var myScale = player.GetVar("scaling");
And then i can change the scale:2 everywhere to scale:myScale

Now you can easily change the scale... 2.5 is a bit too big when you test it.
2.07 perfectly covers all 4 cards. I do have a calculation somewhere to calculation the perfect percentage for things like this, but for now not using that as i dont want to complicate things.

So now the repositoning part...
Quite some solutions for that, but using the simplest one. I add a shape that has the position i want for the final scaled Cards. GSAP has a nice helper function 'getProperty'. With that we can grab the postion of that element, and reposition our card to it.
var xPos = gsap.getProperty(CTRL, "x", "px");
You can get any property from an element... height, width, whatever... if you add a second parameter as here 'px' the property is given back in pixels. If you dont add that, its more versatile. I seldom add that second parameter as i noticed it works better letting GSAP decide what unit to use. So like this...
var xPos = gsap.getProperty(CTRL, "x");

At this point i have to focus on other projects.... will continue this later...