Idea: Wizard transition effects

  • 3
  • Idea
  • Updated 3 years ago
  • Under Consideration
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.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb

Posted 3 years ago

  • 3
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
That is a cool idea... 
Photo of Thimo

Thimo

  • 1,280 Points 1k badge 2x thumb
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%);
	}
}
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
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%);
	}
}
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
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.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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...