1.0 alpha has been released! Learn More 1.0 Docs
menu
Become a Patron

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.

Option Name Description
selectorOrEl The selector or element that the transition targets.

Click Me

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

fadeInImage

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

Option Name Description
selectorOrEl The selector or element that the transition targets.

Click Me

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