3. Animation Transition

Transitions: fillTransition, splashTransition,fadeTransition

The Ripple effect highly depends on transition/timing. Different time selection/transition will provide you different ripple effect too. This module provides you default transitions/timing but you can make experiments as you like. The transition-duration in milliseconds string e.g 750ms is a time required by the ripple core from its current scale until it reaches its full scale scale(1). The transition-timing-function string is the ripple easing behaviour during transition-duration.

You can make a custom animation transition by using Custom Configuration & Global Configuration

fillTransition

The string input is an input of ripple fill-in effect which consists of a transition-duration value. It is highly recommended not to use transition-timing-function on a draggable ripple.

splashTransition

This is a ripple splash effect input. The value must contain of both transition-duration and transition-timing-function sequentially.

fadeTransition

This is for ripple both fadeout and fadein transition in a transition-duration value.

Note: This website http://cubic-bezier.com/ is a great tool to visualize and make experiments of transition-timing-function.