What is @material/animation?
@material/animation is a utility package from Material Design Components (MDC) that provides a set of functions and constants to help create smooth and consistent animations. It is designed to be used with other MDC components to ensure that animations follow Material Design guidelines.
What are @material/animation's main functionalities?
Animation Curves
Provides predefined animation curves such as easeInOut, easeOut, and easeIn that can be used to create smooth transitions and animations.
const { easeInOut, easeOut, easeIn } = require('@material/animation');
// Example usage in a CSS-in-JS style object
const styles = {
transition: `all 250ms ${easeInOut}`
};
Animation Durations
Includes standard durations for animations, such as short, medium, and long, to ensure consistency across different components.
const { duration } = require('@material/animation');
// Example usage in a CSS-in-JS style object
const styles = {
transitionDuration: `${duration.standard}ms`
};
Keyframe Animations
Provides utility functions to handle keyframe animations and ensure compatibility across different browsers.
const { getCorrectEventName } = require('@material/animation');
// Example usage in JavaScript
const animationEndEvent = getCorrectEventName(window, 'animationend');
element.addEventListener(animationEndEvent, () => {
console.log('Animation ended');
});
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.
mdc-animation
mdc-animation is a Sass / CSS / JavaScript library which provides a toolbelt for Material Design animation, based off of the motion guidelines. Currently, it only covers easing curves.
Installation
npm install --save @material/animation
Usage
We currently have variables for the following 3 animation curves:
Variable name | timing function | use case |
---|
$mdc-animation-fast-out-slow-in-timing-function | cubic-bezier(.4, 0, .2, 1) | Standard curve; any animations that are visible from start to finish (e.g. a FAB transforming into a toolbar) |
$mdc-animation-linear-out-slow-in-timing-function | cubic-bezier(0, 0, .2, 1) | Animations that cause objects to enter the screen (e.g. a fade in) |
$mdc-animation-fast-out-linear-in-timing-function | cubic-bezier(.4, 0, ``, 1) | Animations that cause objects to leave the screen (e.g. a fade out) |
SCSS
Simply drop mdc-animation
into your build and start using the variables:
.mdc-thing--animating {
animation: foo 175ms $mdc-animation-fast-out-slow-in-timing-function;
}
or the mixins, which simply assign their corresponding variables to the animation-timing-function
property:
.mdc-thing--on-screen {
@include mdc-animation-fast-out-linear-in;
}
Every mixin has the same name as its corresponding variable, without the -timing-function
suffix.
MDC Animation also provides helper functions for defining transitions for when something enters and exits the frame. A
very common example of this is something that fades in and then fades out using opacity.
@import "@material/animation/functions";
.mdc-thing {
transition: mdc-animation-exit( opacity, 175ms, 150ms);
opacity: 0;
will-change: opacity;
&:active {
transition: mdc-animation-enter(opacity, 175ms );
opacity: 1;
}
}
Note that these functions also work with the animation
property.
@import "@material/animation/functions";
@keyframes fade-in {
from {
transform: translateY(-80px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.mdc-thing {
animation: mdc-animation-enter(fade-in, 350ms);
}
CSS Classes
NOTE: dist/ will be available when installing via NPM.
Alternatively, you can include the built stylesheet and use the classes it exports within your HTML
<link href="path/to/mdc-animation/dist/mdc-animation.css" rel="stylesheet">
<div id="my-animating-div" class="mdc-animation-fast-out-slow-in">hi</div>
CSS Classes have the exact same name as their mixin counterparts.
Overriding the default curves.
All animation variables are marked with !default
, thus they can be overridden should the need
arise.
JavaScript
MDC Web ships with a set of utility functions designed to make animations easier to implement.
Using Utility Functions
To use:
import {getCorrectEventName} from '@material/mdc-animation';
const eventToListenFor = getCorrectEventName(window, 'animationstart');
Method Signature | Description |
---|
getCorrectEventName(windowObj: Object, eventType: string) | Returns a JavaScript event name. Prefixed if necessary. |
getCorrectPropertyName(windowObj: Object, eventType: string) | Returns a CSS property name. Prefixed if necessary. |