How to create a Flip Card in Storyline 360 (with WCAG Accessibility tips)
HTML-код
- Опубликовано: 12 сен 2024
- In this video you'll learn how to create a flip card interaction within Storyline 360.
Let me know if you have any thoughts in the comments or you can always email me at team@konnektis.com
#articulate #flipcard #storyline #storyline360 #wcag #accessibility
Great video! Love the way you set up the flipcard animation, and how you have thought about accessibility in this interaction.
Thanks so much, Mark :) - very kind of you to say and glad you enjoyed the video!
Great video, thanks! I'm pretty new to Storyline so was good to see a solution for the flip interaction - I'm also beginning focus more on accessibility so the tips there were great, too! I'm literally going to go through the rest of your videos now!
Thanks so much and we'll be aiming to have some more tips and tricks up soon!
Hello! Thank you for sharing this. Do you have any tips on what to do to flip it back to the front? I've been playing around with the triggers but I can't seem to get it right.
Like it but it is a very long winded way of doing this. I just put the reveal card on top of the button with the intial state of hidden, when the button is clicked trigger the button to hidden and the reveal card changes state to nornal with an entrance swivel animation..
Yeah, that's a really good solution as well and one we will sometimes use!
The thing that brought us to make this longer version, and wanting to share it, was a client not liking the fact that swivel always had a few swivels so it didn't look like a genuine flip. This was able to capture that single flip a little better.
Thanks for adding your thoughts, we love to hear input!
Hello, awesome tutorial. Is there a way to keep the flipped card flipped while the other flip? Right now, I can only flip one at a time. I want the user to be able to see all 4 "revealed" if that makes sense.
Thank you!
thank you, this was helpful!
how did you add that color palette on the left side of the slide? and how did you make that color palette? currently struggling with the desing aspect of storyline 😅
Sorry, I thought I'd replied to this! All I've done with that palette is added a few rectangles off canvas on the master slide - I just sometimes find this an easy method of quickly eye dropping a colour I need.
I tried but did not get the same output. please share the sample file
Hi, I'm using Storyline 3 and it doesn't have the jump to time feature that you use on the back card - is there any workaround for this? I'll even take a javascript option if there is one, please - many thanks!
Have you tried GSAP animation with Javascript?
@@wormholeinteractive No, I haven't! Do you have a link to a tutorial please? Thank you so much!
Hi! It's been a while since I've used an older version so I can try have a look, but off the top of my head could you use more layers than we do? And use show layer at the cue point to cut the animation and just display the back?
@@elearningjourney Sounds like this could work! I'll give it a try and let you know, thank you so much 👍
@@elearningjourney I tried this but couldn't make it work (unless I'm doing something wrong??) - the back of the card wants to swivel at least twice - aaaaargh! Never mind, at least I know how to do it when I upgrade to the newest Storyline - thanks anyway!