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.


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>


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>

For more detailed informations please visit: