Idea: Wizard transition effects

That is a cool idea… 

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%); } }<br>

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.

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%); } }<br>

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…