Blog Post

Discover
1 MIN READ

Storyline 360: Animated Notecard Interaction

Montsea's avatar
Montsea
Super Hero
8 years ago

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!

 

See this project in action.

Published 8 years ago
Version 1.0
  • 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.
    • BethDokolasa's avatar
      BethDokolasa
      Community Member
      I just did that, too!!! lol wishful thinking I guess.
  • shinashani's avatar
    shinashani
    Community Member
    Very good job but I do not understand the animation when i click on each box
    can you explain?

    you changed the codes?

    thank you very much

  • EllenBurggraf's avatar
    EllenBurggraf
    Community Member
    This is so cool!!! I didn't realize you can animate the states. I love it!
  • 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
  • FransdeGreef's avatar
    FransdeGreef
    Community Member
    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
    • PatrickMcDon297's avatar
      PatrickMcDon297
      Community Member
      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!
      • IgorBelyaev's avatar
        IgorBelyaev
        Community Member
        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 )