transform Transitions

We've made some custom animation functions that will transition your content. It's recommended to use this with our ScrollFire Plugin to make your content transition in as you scroll.

showStaggeredList

Use this to create a staggered reveal effect for any UL Tag with list items. Just make sure the list items in the UL are opacity: 0; to ensure the animation works correctly.

Click Me 
                      	
<a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a>
  • List Item

    This is a description

  • List Item

    This is a description

  • List Item

    This is a description

  • List Item

    This is a description

  • List Item

    This is a description

fadeInImage

Use this to fade in images. It also animates grayscale and brightness to give it a unique effect.

Click Me 
                      	
<a href="#!" class="btn" onclick="Materialize.fadeInImage('#image-test')">Click Me</a>