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 bui...
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?
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?
