background

KendoReact

React Animation

  • Animate UI elements which appear, enter, or exit the viewport using various animation effects.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Vue Kendoka Header
  • Animate UI Elements Within Your React App

    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
  • 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

All KendoReact Components

Next Steps