Animated flashcard interaction that has everything: cool custom animation, bright colors, and fun icons. Everything is aligned to Storyline's color and font themes, so you can customize the interaction for your own projects. Enjoy!
I originally read the above as:
Notecake Interaction
This note card interaction was designed in Articulate Storyline 360 and features *edible* colors, graphics and fonts.
I pulled the project apart in Storyline, but there doesn't seem to be anything to indicate showing an animation on mouse-over. Can you please explain how this is done?
The animation is caused by multiple things. The top coloured title bar has a hover state, which has an "in" and "out" animation, which gives the effect when hovering the mouse. The image (cupcake) also has an "in" and "out" animation, giving the effect that it is changing colour with a wipe. Three items are then grouped together, causing the animations on both of those items to trigger when the state of the grouped items are hovered over. I use a similar effect for buttons when they are hovered over, with icons having a wipe on animation. I find this adds a little to the user experience
When I open the file in Storyline 360, I see no animations assigned to the objects nor their states. Are you certain that's what is happening here? I see that the title bar has a hover state with a lighter shade, and the icons have a darker shade, but no animation is assigned to any of them.
It's driving me mad!
To see that you need to ungroup any of the menu elements. Then select the coloured title and view it's states. There, the state of the hover has customized input-output animations. The author has set up everything, and then grouped and got a consistent animation when hovering the whole element :)
multi-level animated thing )
Amazing! The triggers and states are so versatile. I am always looking for ways to capture the users imagination and ask, "How'd they do that?"
Thank you
10 Comments