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

Usage

Sass Variables

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

@use "@loipham/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 "@loipham/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 "@loipham/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 '@loipham/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.