eLBX Online 2021 | June 22 - 24


Join us for a FREE, 3-day virtual conference featuring industry experts and eLearning thought leaders. Learn about critical topics such as eLearning accessibility, learning experience design, course authoring, virtual reality, and gamification. Register today!
CHECK IT OUT

BUTTON ANIMATIONS

jackgayler
jackgayler Community Member Posts: 46 ♪ Opening Act ♪
Additional to Hover/Down states, it would be great to see button animations, e.g:
  • Hover over = Makes the button grow 20%
  • Hover over = Wiggles the button
  • Hover over = Floats the button
  • Click down = Shrinks button 10%
  • Click down = Pops the button
Just off the top of my head, feel free to add suggestions below.

Comments

  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    with a bit of Javascript, CSS or GSAP thats easy to achieve...
  • lsilver
    lsilver Community Member Posts: 80
    These are great suggestions, thank you for submitting!
  • jackgayler
    jackgayler Community Member Posts: 46 ♪ Opening Act ♪
    Another way would be to add GIF animations to button states. E.g. my normal state would be a PNG and my Over state would be a GIF. So hovering over the button plays the GIF.
  • wheels
    wheels Community Member, Administrator, Moderator, Rockstar Manager Posts: 557 eLearning ROCKSTAR Admin Team
    In the December 2018 release we will introduce a scale element for button style images. The scale can be changed for different states, so on hover and down you can make the image bigger or smaller. It's really nice and the suggestions above are great too, we will keep those in our mind going forward.
  • jackgayler
    jackgayler Community Member Posts: 46 ♪ Opening Act ♪
    Sounds great! Only a few days away. I hear the latest CenarioVR update will also have a scaling feature for hotspots which should be good.

    For the GIF button state usage, I have seen this functionality used well with Wix (website builder).
  • jreynolds2084
    jreynolds2084 Community Member Posts: 4
    I sometimes use CSS keyframes to achieve certain animations.  They are flexible and work across browsers. For example, when I hover over a circular button (an image I uploaded), it spins.

    .anim_spin:hover {
    animation: spin 0.5s 1 linear;
    }

    @keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(30deg);}
    }
  • tmichael9734
    tmichael9734 Community Member Posts: 109 ☆ Roadie ☆
    Hi James,

     

    I came across your post and I want to spin an image in Lectora 18.  Where and how to put the above  CSS keyframe?

    Thank you,
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!