WordPress.org
Get WordPress
WordPress.org

WordPress Developer Resources

Animate

Animate

In this article

Back to top

Simple interface to introduce animations to components.

Usage

import { Animate, Notice } from '@wordpress/components';

const MyAnimatedNotice = () => (
    <Animate type="slide-in" options={ { origin: 'top' } }>
        { ( { className } ) => (
            <Notice className={ className } status="success">
                <p>Animation finished.</p>
            </Notice>
        ) }
    </Animate>
);

Props

Name Type Default Description
type string undefined Type of the animation to use.
options object {} Options of the chosen animation.
children function undefined A callback receiving a list of props ( className ) to apply to the DOM element to animate.

Available Animation Types

appear

This animation is meant for popover/modal content, such as menus appearing. It shows the height and width of the animated element scaling from 0 to full size, from its point of origin.

Options

Name Type Default Description
origin string top center Point of origin (top, bottom,middle right, left, center).

loading

This animation is meant to be used to indicate that activity is happening in the background. It is an infinitely-looping fade from 50% to full opacity. This animation has no options, and should be removed as soon as its relevant operation is completed.

slide-in

This animation is meant for sidebars and sliding menus. It shows the height and width of the animated element moving from a hidden position to its normal one.

Options

Name Type Default Description
origin string left Point of origin (left).

First published

Last updated

Edit article

Improve it on GitHub: Animate