Forum Discussion
Storyline Template Design: Flip Interaction
Created a storyline sample template design using different interactivities in Articulate 360. Its creation is still in progress but I am happy that I got my flip card interactivity to function just like I wanted. Check it out below.
Storyline 360 sample template 1 - Vector Graphics | Review 360 (articulate.com)
Thanks so much for sharing this template, Suchitra. And isn't it so satisfying when you can get the interaction idea you had in your head to work just as you planned in the course?!
I especially loved how many of your slides animated in in a similar way to your GIF illustrations. Did you find the GIFs first and use them as inspiration for the slides, or did you have the idea to have slide elements animate in from multiple directions and then find GIF illustrations that matched that approach too?Hi Bianca! I usually start by adding elements to the slide and then animating it. I was going to use just vector images in the beginning and then add start and end animations to it from storyline. But later decided to use GIF's which complimented and went well with other elements on slide.
Great job! Will you be willing to share the file?
Hi Rubina! I am not sure about sharing the source file for now, since its a part of project I am working on. Maybe later if I get approval for it to be shared in sample form, I will share the file here.
But if you need to know about any interactions in the template, I will be glad to help with it.
So, how did you achieve the flip effect? Finely-tuned animations? Or perhaps with JavaScript?
A very nice template all in all.Hi Hianna! I have used the swivel animation with 0.25sec time and added trigger to start respective flip layer at 10 sec. I have done this for all 4 layers [ 2 for front flip & 2 for back flip].
You can also skip the trigger and use swivel with 0.10sec but the above way makes it work more precisely.
I love the flip card animation and have tried unsuccessfully on a couple occasions to create it.
Using your tip about the swivel animation and timing, I created a very similar effect in the attached sample and thought I'd share for anyone here who may find the sample useful.
Here's a link to a "review preview" of my sample on Review360.
Thanks so much for the tip! Great work on the template. It is beautifully done. *chef's kiss*
Hi Suchitra, These animations are outstanding. Looking forward to view the sample file.
Hey Sandeep! Thank you for liking it 😃
Hi Everyone! You can find storyline file for flip interactivity at below link. Since I wont be able to share the above template I have created a separate flip interaction example at below link. Hope you can find this is helpful.
Thanks! I will work on it.