Idea: Wizard transition effects

edited October 15, 2019 in Ideas
Another neat idea would be for wizard steps to offer vertical and horizontal sliding effects as the new page is loaded. You could make the new step look like it is coming from the right or up from the bottom of the wizard pane.
3
3 votes

Under Consideration · Last Updated

Comments

  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    That is a cool idea... 
  • edited September 21, 2018
    You can easily do this using some inline CSS

    just put a wrapper around your wizard content with a class (in this case wizard-animation)

    and then use this css to slide the content in...
    .wizard-animation {      animation-name: slideLeft;   -webkit-animation-name: slideLeft;      animation-duration: 0.5s;    -webkit-animation-duration: 0.5s;     animation-timing-function: ease-out;    -webkit-animation-timing-function: ease-out;       visibility: visible !important;   }    @keyframes slideLeft {   0% {    transform: translateX(150%);   }   100% {    transform: translateX(0%);   }  }    @-webkit-keyframes slideLeft {   0% {    -webkit-transform: translateX(150%);   }   100% {    -webkit-transform: translateX(0%);   }  }
  • edited October 15, 2019
    Awesome, Thimo! Thanks. I am hereby modifying my request for this post to be for a searchable Skuid community JavaScript snippet And CSS library accessible from the page builder.
  • Conlan O'RourkeConlan O'Rourke ✭✭✭✭
    edited December 1, 2016
    Just came across this and tested it out on my wizard...looks pretty neat.

    Just an fyi though, the CSS editor asked me to add -moz to the beginning of: 

    • animation-name
    • animation-duration
    • animation-timing-function

    So, this was the final CSS that worked for me.


    .wizard-animation {     -moz-animation-name: slideLeft;  -webkit-animation-name: slideLeft;    -moz-animation-duration: 1.0s;   -webkit-animation-duration: 1.0s;   -moz-animation-timing-function: ease-out;   -webkit-animation-timing-function: ease-out;     visibility: visible !important;  }  @keyframes slideLeft {  0% {   transform: translateX(150%);  }  100% {   transform: translateX(0%);  } }  @-webkit-keyframes slideLeft {  0% {   -webkit-transform: translateX(150%);  }  100% {   -webkit-transform: translateX(0%);  } }

  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    Yes,  a "skuid tank" of snippets, css clippings and custom components has been on our radar for a while.  

    So much to do.   So little time... 
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!