Wondering what’s next for npm?Check out our public roadmap! »

    @material/animation
    TypeScript icon, indicating that this package has built-in type declarations

    11.0.0 • Public • Published

    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 @material/animation
    

    Usage

    Sass Variables

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

    @use "@material/animation";
    
    .my-element--animating {
      animation: foo-keyframe 175ms animation.$standard-curve-timing-function;
    }
    Variable Description
    $deceleration-curve-timing-function Timing function to decelerate
    $standard-curve-timing-function Timing function to quickly accelerate and slowly decelerate
    $acceleration-curve-timing-function Timing function to accelerate
    $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.

    @use "@material/animation";
    
    .my-element {
      transition: animation.exit-permanent(/* $name: */ opacity, /* $duration: */ 175ms, /* $delay: */ 150ms);
      opacity: 0;
      will-change: opacity;
    
      &--animating {
        transition: animation.enter(/* $name: */ opacity, /* $duration: */ 175ms);
        opacity: 1;
      }
    }
    @use "@material/animation";
    
    @keyframes fade-in {
      from {
        transform: translateY(-80px);
        opacity: 0;
      }
    
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    
    .my-element {
      animation: animation.enter(/* $name: */ fade-in, /* $duration: */ 350ms);
    }
    Function Description
    enter($name, $duration, $delay) Defines transition for entering the frame
    exit-permanent($name, $duration, $delay) Defines transition for exiting the frame permanently
    exit-temporary($name, $duration, $delay) Defines transition for exiting the frame temporarily

    JavaScript

    These functions handle prefixing across various browsers

    import {getCorrectEventName} from '@material/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.

    Install

    npm i @material/animation

    DownloadsWeekly Downloads

    130,914

    Version

    11.0.0

    License

    MIT

    Unpacked Size

    71.2 kB

    Total Files

    25

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar