Animation
Syncfusion® React Animation components provide smooth and customizable animation effects for HTML elements by running sequences of frames, with support for various animation types, timing functions, and event handling. These components include Fade, Zoom, Slide, and Flip animations to enhance user experience.
Usage
The Animation components are available in the @syncfusion/react-base package. This package and its base styles are automatically included as dependencies when you install any Syncfusion® React component package. Ensure the base styles are imported in your application when using Animation components.
Fade
The Fade component provides a smooth opacity based animation effect that creates elegant appearing and disappearing animations with seamless visual flow.
Zoom
The Zoom component delivers dynamic scaling animation effects that create impressive visual impact. It makes elements scale up from a smaller size when appearing and scale down to disappear, providing a natural zoom-in/zoom-out behavior.
Slide
The Slide component offers versatile directional sliding animation effects that bring elements into view from specific direction and relative to the container. It supports four distinct directions: Top, Bottom, Left, and Right, where the direction property determines the origin point of the sliding animation.
Flip
The Flip component provides a 3D flip animation effects with comprehensive direction options. It supports eight different flip directions including LeftDown, LeftUp, RightDown, RightUp, XDown, XUp, YLeft, and YRight, offering versatile transformation effects that add depth and dimensionality.
Customization
The Syncfusion® React Animation components provides customization options to control the timing, and behavior of animations through various properties and events.
Duration
The duration property specifies the length of time that an animation should take to complete. The animation duration is specified in milliseconds (ms) and determines the total amount of time that an animation should run.
The value of the animation duration can be adjusted to change the speed of the animation, with shorter durations resulting in faster animations and longer durations resulting in slower animations. The below sample demonstrates an interactive dialog with a numeric input that allows real-time adjustment of animation duration.
Delay
The delay property specifies the amount of time to wait before starting an animation. The animation delay is specified in milliseconds (ms) and determines the amount of time that should elapse before an animation begins.
This can be useful in creating more complex animations, where multiple elements are animated in sequence, or in creating animations that start only after a user interaction has taken place. Below sample showcases a Message component that demonstrates delayed animation start.