@material/animation

Animation

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

Design & API Documentation

• Material Design guidelines: Motion

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.

Changelog

14.0.0 (2022-04-27)

Bug Fixes

• button: update HCM shim to use the existing focus-ring (a657abb)
• checkbox: Add explicit system color for checkmark in HCM. (8c4da22)
• checkbox: move forced-colors theme out of static styles (bbd1126)
• checkbox: Update checkbox theme styles mixin to accept css vars (c14e977)
• chips: Fix typography selector in GMDC-Wiz chips theming (43c7d87)
• datatable: Adjust data table last row border-radius to support setting row background-color. (ba78e87)
• dialog: Render dividers in Firefox 94 on Windows HCM (fae6c65)
• dialog: Set default z-index for close button in FloatingSheet dialog. (3366a71)
• fab: Add focus ring in HCM. (d57ec74)
• focus-ring: add 2d padding customizability, RTL bugfix (f81fb1d)
• focus-ring: box-sizing bugfix to content-box. If box-sizing border-box is inherited the ring spacing will collapse. (e58552c)
• focus-ring: ignore pointer events (3ef470e)
• focus-ring: RTL bugfix (e00181e)
• iconbutton: Fixed max width and height for high contrast mode focus ring on icon buttons. Display only in forced colors mode. (cf42927)
• iconbutton: Set icon button ripple z-index to -1. (586e740)
• list: Improve a11y for multi-select lists (9736ddc)
• list: Remove conflicting validation for checkbox list in setEnabled (353ca7e)
• list: Update lastSelectedIndex when toggling a checkbox range (dcba26f)
• menusurface: Add a getOwnerDocument() method to MDCMenuSurfaceAdapter to provide a reference to the document that owns the menu surface DOM element. (3486659)
• radio: Fix disabled state in Firefox Windows high contrast mode (23043ac)
• radio: Modify theme styles Sass mixin validation to validate only keys (390220e)
• select: Add border to select menu in HCM. (5d80969)
• select: revert down/up arrow on anchor changing selected index (43d08ba)
• slider: Fix bug where secondary click moves slider thumb. (3ab9565)
• slider: Fix IE11 bug - unset is unsupported in IE. (f460e23)
• slider: In updateUI, fix behavior to match jsdoc claim that when thumb param is undefined it updates both thumbs. Input attributes were not being updated at all. (cc4ed13)
• slider: Make the slider errors easier to debug by providing all relevant values in the error message. (8687937)
• snackbar: address Trusted Types violation (cbd9358)
• tooltip: Adjusts logic in validateTooltipWithCaretDistances method. (3e30054)
• typography: Fixes typography theme-styles mixin... the value being retreived from the $theme map and css property name was swapped. The mixin would request font-size/font-weight/letter-spacing from the $theme map (which expects size/weight/tracking)... so these values would always be null. (32b3913)
• Remove /** @override */ tags from TypeScript code. (c3cdff0)
• Simplify MDCAttachable interface to be any object (Function) that has attachTo. (05db65e)
• Snackbar action button ripple color is applied to the ripple element. (4e66fb2)
• Work around bug in Sass (037285f), closes sass/sass#3259
• switch: Restore Firefox 94 HCM outlines (39cf14b)
• textfield: Fix breaking tests due to no valid pointerId being associated with pointer events. (15db4f1)
• tooltip: Only sends notification of a tooltip being hidden if showTimeout is not set (indicating that this tooltip is about to be re-shown). (6ca8b8f)

Features

• banner: Add disableAutoClose params for both banner actions to prevent the banner buttons from automatically closing the banner. Add adapter #notifyActionClicked method. (b094eaa)
• chips: add focus ring styles (783f6fd)
• chips: Added elevation tint layer color support in chips (c78ff04)
• data-table: separate table structure into its own mixin (9f9d928)
• dialog: Add styling for floating sheets (78305b6)
• dialog: Add styling for floating sheets with content padding (3e20c1d)
• Dialog: Adds an API to hide the header for GMDC Fullscreen Dialog in non-fullscreen mode (ab4aba1)
• Dialog: Adds an API to set custom position for GMDC Dialog (ea9b5b4)
• Dialog: Adds an API to set custom z-index for GMDC Dialog (96ea061)
• focus-ring: added a new mixin so we can override just the focus-ring color (641ed08)
• focus-ring: added a new mixin so we can override just the focus-ring radius (7321d62)
• iconbutton: Add link icon button Sass. (9803d2d)
• mdc-list: introduce selection change event (7d8ea46)
• menu: allow preferentially opening surface below anchor (261f2db)
• MenuSurface: Add opening event for menus. (53b3cad)
• select: Add theming mixin boilerplate code to select (ae8a6a3)
• select: Add validation getter methods. (bdf1d37)
• select: Added theme mixins to MDC select (dcfe49c)
• slider: Add minRange param to range sliders to request a minimum gap between the two thumbs. (8fffcb5)
• slider: Add an option to hide focus styles after pointer interaction. (ec54d90)
• slider: Keep the slider value indicator within the bounds of the slider if possible. (c047f7c)
• state: make context aware (b2fe352)
• switch: Add high contrast mode focus ring to switch (f31a833)
• text-field: Add theming mixin boilerplate code to text-field (eb382f3)
• text-field: Added theme mixins to MDC text field (344d528)
• textfield: adding input-font-size mixin (207230e)
• theme: allow custom property strings in theme.validate-theme() (4e372fb)
• add new class and mixin for open state of a menu item (9a02b6e)
• Indicate which thumb valueToAriaValueTextFn and valueToValueIndicatorTextFn functions are called for. (b6510c8)
• textfield: adding input-font-family mixin (991fb99)
• Describe how to add child lists into a list item. (758ce31)

BREAKING CHANGES

• MenuSurface: Adds #notifyOpening method to menu surface adapter.

PiperOrigin-RevId: 444830518

• slider: Adds #getValueIndicatorContainerWidth method to slider adapter.

PiperOrigin-RevId: 419837612

Similar packages

Other packages similar to @material/animation

animejs

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It supports various types of animations including CSS properties, SVG, DOM attributes, and JavaScript objects. Compared to @material/animation, Anime.js offers a more extensive set of features and greater flexibility for complex animations.

gsap

GSAP (GreenSock Animation Platform) is a robust JavaScript library for high-performance animations. It is widely used for creating complex timelines and animations with precise control. GSAP provides more advanced features and customization options compared to @material/animation, making it suitable for more intricate animation needs.

velocity-animate

Velocity is an animation engine that combines the best of jQuery and CSS transitions. It offers a rich set of features for creating smooth animations and is known for its performance. While @material/animation focuses on Material Design guidelines, Velocity provides a more general-purpose solution for web animations.