BUTTON ANIMATIONS

jackgayler
jackgayler Community Member Posts: 51 ♪ 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: 51 ♪ 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 Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 574 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: 51 ♪ 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: 119 ☆ 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,