Component Library
Sign out

Animation 

<h3 class="acl-typography--subtitle1">Attention Seekers</h3>
<div v-bind="message"></div>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="bounce">touch_app</i>
        <span class="acl-demo__animation-catalog-item-name">bounce</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="flash">feedback</i>
        <span class="acl-demo__animation-catalog-item-name">flash</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="pulse">fingerprint</i>
        <span class="acl-demo__animation-catalog-item-name">pulse</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="shake">pan_tool</i>
        <span class=" acl-demo__animation-catalog-item-name">shake</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="swing">notifications_active</i>
        <span class=" acl-demo__animation-catalog-item-name">swing</span>
    </div>

    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="tada">verified_user</i>
        <span class=" acl-demo__animation-catalog-item-name">tada</span>

    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="wobble">toll</i>
        <span class=" acl-demo__animation-catalog-item-name">wobble</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Bouncing Entrances Seekers</h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="bounceIn">album</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceIn</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="bounceInDown">get_app</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceInDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="bounceInLeft">input</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceInLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="bounceInRight">track_changes</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceInRight</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="bounceInUp">visibility</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceInUp</span>
    </div>

</div>

<h3 class="acl-typography--subtitle1">Bouncing Exits Seekers</h3>
<div class="acl-demo__animation-catalog">

    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="bounceInDown">work_off</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceOutDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="bounceInLeft">gesture</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceOutLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="bounceInRight">delete_swap</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceOutRight</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="bounceInUp">wifi_lock</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceOutUp</span>
    </div>

</div>

<h3 class="acl-typography--subtitle1">Fading Entrances </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeIn">cloud</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeIn</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeInDown">cast</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeInDownBig">toys</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInDownBig</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeInLeft">watch</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeInLeftBig">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInLeftBig</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeInRight">adjust</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInRight</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeInRightBig">blur_on</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInRightBig</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeInUp">camera_alt</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInUp</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeInUpBig">healing</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInUpBig</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Fading Exits </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeOut">public</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOut</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeOutDown">share</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeOutDownBig">spa</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutDownBig</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeOutLeft">more</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeOutLeftBig">sms_failed</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutLeftBig</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeOutRight">layers_clear</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutRight</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeOutRightBig">local_offer</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutRightBig</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeOutUp">transform</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutUp</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="fadeOutUpBig">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutUpBig</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Flippers</h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="flip">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">flip</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="flipInX">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">flipInX</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="flipInY">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">flipInY</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="flipOutX">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">flipOutX</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="flipOutY">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">flipOutY</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Lightspeed</h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="lightSpeedIn">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">lightSpeedIn</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="bounce">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">lightSpeedOut</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Rotating Entrances </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="rotateIn">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateIn</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="rotateInDownLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateInDownLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="rotateInDownRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateInDownRight</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="rotateInUpLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateInUpLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="rotateInUpRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateInUpRight</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Rotating Exits </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="rotateOut">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateOut</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="rotateOutDownLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateOutDownLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="rotateOutDownRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateOutDownRight</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="rotateOutUpLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateOutUpLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="rotateOutUpRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateOutUpRight</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Sliding Entrances </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="slideInUp">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideInUp</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="slideInDown">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideInDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="slideInLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideInLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="slideInRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideInRight</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Sliding Exits </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="slideOutUp">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideOutUp</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="slideOutDown">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideOutDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="slideOutLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideOutLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="slideOutRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideOutRight</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Zoom Entrances </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="zoomIn">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomIn</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="zoomInUp">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomInUp</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="zoomInDown">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomInDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="zoomInLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomInLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="zoomInRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomInRight</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Zoom Exits </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="zoomOut">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomOut</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="zoomOutUp">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomOutUp</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="zoomOutDown">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomOutDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="zoomOutLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomOutLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="zoomOutRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomOutRight</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Specials </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="hinge">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">hinge</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="jackInTheBox">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">jackInTheBox</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="rollin">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rollin</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)" data-animate-class="rollOut">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rollOut</span>
    </div>
</div>

<script>
    function addClass(e) {
        const animateClass = e.dataset.animateClass;
        e.classList.toggle(animateClass);
    }
</script>
 
<h3 class="acl-typography--subtitle1">Attention Seekers</h3>
<div v-bind="message"></div>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="bounce">touch_app</i>
        <span class="acl-demo__animation-catalog-item-name">bounce</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="flash">feedback</i>
        <span class="acl-demo__animation-catalog-item-name">flash</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="pulse">fingerprint</i>
        <span class="acl-demo__animation-catalog-item-name">pulse</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="shake">pan_tool</i>
        <span class=" acl-demo__animation-catalog-item-name">shake</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="swing">notifications_active</i>
        <span class=" acl-demo__animation-catalog-item-name">swing</span>
    </div>

    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="tada">verified_user</i>
        <span class=" acl-demo__animation-catalog-item-name">tada</span>

    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="wobble">toll</i>
        <span class=" acl-demo__animation-catalog-item-name">wobble</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Bouncing Entrances Seekers</h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="bounceIn">album</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceIn</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="bounceInDown">get_app</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceInDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="bounceInLeft">input</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceInLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="bounceInRight">track_changes</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceInRight</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="bounceInUp">visibility</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceInUp</span>
    </div>

</div>

<h3 class="acl-typography--subtitle1">Bouncing Exits Seekers</h3>
<div class="acl-demo__animation-catalog">

    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="bounceInDown">work_off</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceOutDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="bounceInLeft">gesture</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceOutLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="bounceInRight">delete_swap</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceOutRight</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="bounceInUp">wifi_lock</i>
        <span class=" acl-demo__animation-catalog-item-name">bounceOutUp</span>
    </div>

</div>

<h3 class="acl-typography--subtitle1">Fading Entrances </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeIn">cloud</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeIn</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeInDown">cast</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeInDownBig">toys</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInDownBig</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeInLeft">watch</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeInLeftBig">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInLeftBig</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeInRight">adjust</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInRight</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeInRightBig">blur_on</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInRightBig</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeInUp">camera_alt</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInUp</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeInUpBig">healing</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeInUpBig</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Fading Exits </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeOut">public</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOut</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeOutDown">share</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeOutDownBig">spa</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutDownBig</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeOutLeft">more</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeOutLeftBig">sms_failed</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutLeftBig</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeOutRight">layers_clear</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutRight</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeOutRightBig">local_offer</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutRightBig</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeOutUp">transform</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutUp</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="fadeOutUpBig">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">fadeOutUpBig</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Flippers</h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="flip">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">flip</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="flipInX">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">flipInX</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="flipInY">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">flipInY</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="flipOutX">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">flipOutX</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="flipOutY">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">flipOutY</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Lightspeed</h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="lightSpeedIn">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">lightSpeedIn</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="bounce">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">lightSpeedOut</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Rotating Entrances </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="rotateIn">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateIn</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="rotateInDownLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateInDownLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="rotateInDownRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateInDownRight</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="rotateInUpLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateInUpLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="rotateInUpRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateInUpRight</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Rotating Exits </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="rotateOut">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateOut</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="rotateOutDownLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateOutDownLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="rotateOutDownRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateOutDownRight</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="rotateOutUpLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateOutUpLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="rotateOutUpRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rotateOutUpRight</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Sliding Entrances </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="slideInUp">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideInUp</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="slideInDown">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideInDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="slideInLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideInLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="slideInRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideInRight</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Sliding Exits </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="slideOutUp">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideOutUp</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="slideOutDown">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideOutDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="slideOutLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideOutLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="slideOutRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">slideOutRight</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Zoom Entrances </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="zoomIn">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomIn</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="zoomInUp">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomInUp</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="zoomInDown">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomInDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="zoomInLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomInLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="zoomInRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomInRight</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Zoom Exits </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="zoomOut">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomOut</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="zoomOutUp">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomOutUp</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="zoomOutDown">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomOutDown</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="zoomOutLeft">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomOutLeft</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="zoomOutRight">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">zoomOutRight</span>
    </div>
</div>

<h3 class="acl-typography--subtitle1">Specials </h3>
<div class="acl-demo__animation-catalog">
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="hinge">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">hinge</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="jackInTheBox">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">jackInTheBox</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="rollin">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rollin</span>
    </div>
    <div class="acl-demo__animation-catalog-item">
        <i class="material-icons acl-demo__icon-catalog-icon-preview animated" onmouseover="addClass(this)"
            data-animate-class="rollOut">invert_colors</i>
        <span class=" acl-demo__animation-catalog-item-name">rollOut</span>
    </div>
</div>

<script>
    function addClass(e) {
        const animateClass = e.dataset.animateClass;
        e.classList.toggle(animateClass);
    }
</script>
 
/* No context defined. */
  • Content: 
    @import './variables';

@function acl-animation-enter($name, $duration, $delay: 0ms) {
    @return $name $duration $delay $acl-animation-deceleration-curve-timing-function;
}

@function acl-animation-exit-permanent($name, $duration, $delay: 0ms) {
    @return $name $duration $delay $acl-animation-acceleration-curve-timing-function;
}

@function acl-animation-exit-temporary($name, $duration, $delay: 0ms) {
    @return $name $duration $delay $acl-animation-sharp-curve-timing-function;
}

@function acl-animation-standard($name, $duration, $delay: 0ms) {
    @return $name $duration $delay $acl-animation-standard-curve-timing-function;
}
  • URL: /components/raw/animation/_functions.scss
  • Filesystem Path: src/components/animation/_functions.scss
  • Size: 641 Bytes
  • Content: 
    //
// Copyright 2017 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

$acl-animation-deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;
$acl-animation-standard-curve-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
$acl-animation-acceleration-curve-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
$acl-animation-sharp-curve-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !default;
  • URL: /components/raw/animation/_variables.scss
  • Filesystem Path: src/components/animation/_variables.scss
  • Size: 1.5 KB
  • Content: 
    import * as util from './util';
export { util }; // New namespace
export * from './util'; // Old namespace for backward compatibility
//# sourceMappingURL=index.js.map
  • URL: /components/raw/animation/index.js
  • Filesystem Path: src/components/animation/index.js
  • Size: 168 Bytes
  • Content: 
    {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,CAAC,CAAC,gBAAgB;AAE/B,cAAc,QAAQ,CAAC,CAAC,2CAA2C"}
  • URL: /components/raw/animation/index.js.map
  • Filesystem Path: src/components/animation/index.js.map
  • Size: 236 Bytes
  • Content: 
    {
  "_from": "..//animation",
  "_id": "..//animation@4.0.0",
  "_inBundle": false,
  "_integrity": "sha512-IfzXzstWdtKQcsNWu+s2Hpz5dBwkTHtgtzoesr+FC7TqENH+SJdsF1ntnZI1XVi2C9ZlBf7f4BSmXpWHD0MIlw==",
  "_location": "/..//animation",
  "_phantomChildren": {},
  "_requested": {
    "type": "tag",
    "registry": true,
    "raw": "..//animation",
    "name": "..//animation",
    "escapedName": "../%2fanimation",
    "scope": "../",
    "rawSpec": "",
    "saveSpec": null,
    "fetchSpec": "latest"
  },
  "_requiredBy": [
    "#USER",
    "/",
    "/..//checkbox",
    "/..//chips",
    "/..//data-table",
    "/..//dialog",
    "/..//drawer",
    "/..//elevation",
    "/..//fab",
    "/..//floating-label",
    "/..//line-ripple",
    "/..//linear-progress",
    "/..//menu-surface",
    "/..//radio",
    "/..//ripple",
    "/..//select",
    "/..//slider",
    "/..//snackbar",
    "/..//switch",
    "/..//tab-bar",
    "/..//tab-indicator",
    "/..//tab-scroller",
    "/..//textfield",
    "/..//top-app-bar",
    "/material-components-web"
  ],
  "_resolved": "https://registry.npmjs.org/..//animation/-/animation-4.0.0.tgz",
  "_shasum": "19eaf377809f20978f8452a4237d27867d3ffd1d",
  "_spec": "..//animation",
  "_where": "/Users/robcarvill/Development/component-library",
  "bugs": {
    "url": "https://github.com/material-components/material-components-web/issues"
  },
  "bundleDependencies": false,
  "dependencies": {
    "tslib": "^1.9.3"
  },
  "deprecated": false,
  "description": "Animation Variables and Mixins used by Material Components for the web",
  "gitHead": "8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72",
  "homepage": "https://github.com/material-components/material-components-web#readme",
  "keywords": [
    "material components",
    "material design",
    "animation"
  ],
  "license": "MIT",
  "main": "dist/mdc.animation.js",
  "module": "index.js",
  "name": "..//animation",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/material-components/material-components-web.git",
    "directory": "packages/acl-animation"
  },
  "sideEffects": false,
  "types": "dist/mdc.animation.d.ts",
  "version": "4.0.0"
}
  • URL: /components/raw/animation/package.json
  • Filesystem Path: src/components/animation/package.json
  • Size: 2.2 KB
  • Content: 
    {"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG"}
  • URL: /components/raw/animation/types.js.map
  • Filesystem Path: src/components/animation/types.js.map
  • Size: 125 Bytes
  • Content: 
    /**
 * @license
 * Copyright 2016 Google Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
var cssPropertyNameMap = {
    animation: {
        prefixed: '-webkit-animation',
        standard: 'animation',
    },
    transform: {
        prefixed: '-webkit-transform',
        standard: 'transform',
    },
    transition: {
        prefixed: '-webkit-transition',
        standard: 'transition',
    },
};
var jsEventTypeMap = {
    animationend: {
        cssProperty: 'animation',
        prefixed: 'webkitAnimationEnd',
        standard: 'animationend',
    },
    animationiteration: {
        cssProperty: 'animation',
        prefixed: 'webkitAnimationIteration',
        standard: 'animationiteration',
    },
    animationstart: {
        cssProperty: 'animation',
        prefixed: 'webkitAnimationStart',
        standard: 'animationstart',
    },
    transitionend: {
        cssProperty: 'transition',
        prefixed: 'webkitTransitionEnd',
        standard: 'transitionend',
    },
};
function isWindow(windowObj) {
    return Boolean(windowObj.document) && typeof windowObj.document.createElement === 'function';
}
export function getCorrectPropertyName(windowObj, cssProperty) {
    if (isWindow(windowObj) && cssProperty in cssPropertyNameMap) {
        var el = windowObj.document.createElement('div');
        var _a = cssPropertyNameMap[cssProperty],
            standard = _a.standard,
            prefixed = _a.prefixed;
        var isStandard = standard in el.style;
        return isStandard ? standard : prefixed;
    }
    return cssProperty;
}
export function getCorrectEventName(windowObj, eventType) {
    if (isWindow(windowObj) && eventType in jsEventTypeMap) {
        var el = windowObj.document.createElement('div');
        var _a = jsEventTypeMap[eventType],
            standard = _a.standard,
            prefixed = _a.prefixed,
            cssProperty = _a.cssProperty;
        var isStandard = cssProperty in el.style;
        return isStandard ? standard : prefixed;
    }
    return eventType;
}
//# sourceMappingURL=util.js.map
  • URL: /components/raw/animation/util.js
  • Filesystem Path: src/components/animation/util.js
  • Size: 3.1 KB
  • Content: 
    {"version":3,"file":"util.js","sourceRoot":"","sources":["util.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAQH,IAAM,kBAAkB,GAAyB;IAC/C,SAAS,EAAE;QACT,QAAQ,EAAE,mBAAmB;QAC7B,QAAQ,EAAE,WAAW;KACtB;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,mBAAmB;QAC7B,QAAQ,EAAE,WAAW;KACtB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,oBAAoB;QAC9B,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC;AAEF,IAAM,cAAc,GAAwB;IAC1C,YAAY,EAAE;QACZ,WAAW,EAAE,WAAW;QACxB,QAAQ,EAAE,oBAAoB;QAC9B,QAAQ,EAAE,cAAc;KACzB;IACD,kBAAkB,EAAE;QAClB,WAAW,EAAE,WAAW;QACxB,QAAQ,EAAE,0BAA0B;QACpC,QAAQ,EAAE,oBAAoB;KAC/B;IACD,cAAc,EAAE;QACd,WAAW,EAAE,WAAW;QACxB,QAAQ,EAAE,sBAAsB;QAChC,QAAQ,EAAE,gBAAgB;KAC3B;IACD,aAAa,EAAE;QACb,WAAW,EAAE,YAAY;QACzB,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,eAAe;KAC1B;CACF,CAAC;AAEF,SAAS,QAAQ,CAAC,SAAiB;IACjC,OAAO,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAO,SAAS,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC;AAC/F,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,SAAiB,EAAE,WAAoC;IAE5F,IAAI,QAAQ,CAAC,SAAS,CAAC,IAAI,WAAW,IAAI,kBAAkB,EAAE;QAC5D,IAAM,EAAE,GAAG,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7C,IAAA,oCAAsD,EAArD,sBAAQ,EAAE,sBAA2C,CAAC;QAC7D,IAAM,UAAU,GAAG,QAAQ,IAAI,EAAE,CAAC,KAAK,CAAC;QACxC,OAAO,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;KACzC;IACD,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,SAAiB,EAAE,SAA8B;IAEnF,IAAI,QAAQ,CAAC,SAAS,CAAC,IAAI,SAAS,IAAI,cAAc,EAAE;QACtD,IAAM,EAAE,GAAG,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7C,IAAA,8BAA6D,EAA5D,sBAAQ,EAAE,sBAAQ,EAAE,4BAAwC,CAAC;QACpE,IAAM,UAAU,GAAG,WAAW,IAAI,EAAE,CAAC,KAAK,CAAC;QAC3C,OAAO,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;KACzC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC"}
  • URL: /components/raw/animation/util.js.map
  • Filesystem Path: src/components/animation/util.js.map
  • Size: 1.6 KB

Animation

Material in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion.

Design & API Documentation

Installation

npm install ..//animation

Usage

Sass Variables

We provide timing functions which you can use with the animation or transition CSS properties

@import "../animation/variables";

.my-element--animating {
  animation: foo-keyframe 175ms $acl-animation-standard-curve-timing-function;
}
Variable Description
acl-animation-deceleration-curve-timing-function Timing function to decelerate
acl-animation-standard-curve-timing-function Timing function to quickly accelerate and slowly decelerate
acl-animation-acceleration-curve-timing-function Timing function to accelerate
acl-animation-sharp-curve-timing-function Timing function to quickly accelerate and decelerate

The following functions create transitions given $name and the $duration. You can also specify $delay, but the default is 0ms. $name can either refer to the keyframe, or to CSS property used in transition.

@import "../animation/functions";

.my-element {
  transition: acl-animation-exit-permanent(/* $name: */ opacity, /* $duration: */ 175ms, /* $delay: */ 150ms);
  opacity: 0;
  will-change: opacity;

  &--animating {
    transition: acl-animation-enter(/* $name: */ opacity, /* $duration: */ 175ms);
    opacity: 1;
  }
}
@import "../animation/functions";

@keyframes fade-in {
  from {
    transform: translateY(-80px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.my-element {
  animation: acl-animation-enter(/* $name: */ fade-in, /* $duration: */ 350ms);
}
Function Description
acl-animation-enter($name, $duration, $delay) Defines transition for entering the frame
acl-animation-exit-permanent($name, $duration, $delay) Defines transition for exiting the frame permanently
acl-animation-exit-temporary($name, $duration, $delay) Defines transition for exiting the frame temporarily

JavaScript

These functions handle prefixing across various browsers

import {getCorrectEventName} from '..//animation';

const eventToListenFor = getCorrectEventName(window, 'animationstart');
Method Signature Description
getCorrectEventName(windowObj: Window, eventType: StandardJsEventType) => StandardJsEventType | PrefixedJsEventType Returns a JavaScript event name, prefixed if necessary. See types.ts for supported values.
getCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName) => StandardCssPropertyName | PrefixedCssPropertyName Returns a CSS property name, prefixed if necessary. See types.ts for supported values.