React Animation

Overview

The React Animation component assists with animating HTML elements which appear, enter or exit the viewport. Used internally in many KendoReact UI components, this component is available as a standalone React component to help React developers animate their UI elements.

See React Animation demo

Types of Animation

Out of the box, the KendoReact Animation component comes with many different types of animations, including Fade, Expand, Push, Reveal, Slide and Zoom animations.

See React Types of Animation demo

React Animation - Expand, KendoReact UI Library

React Animation - Reveal, KendoReact UI Library

React Animation - Zoom, KendoReact UI Library

Stacked Animations

Beyond animating an element, a single time, the React Animation component can stack animations, letting a series of animations happen one after another.

See Stacked React Animations demo

React Animation - Stacked Animations, KendoReact UI Library

Disabling Animations

There may be scenarios where the animations that have been added to the page may have to be disabled until a certain criterion has been met. This is why the KendoReact Animation component can toggle between enabled and disabled with a single configuration option.

See Disabling React Animations demo

Custom Rendering

To ensure that the KendoReact animation component can fit any scenario, many aspects of the built-in animations can be customized to make the animations your own.

See React Animation Custom Rendering demo

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.