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.

Getting started

To create a new Vite project, refer to the Vite documentation. Once the Vite project is ready to run with default settings, let's add the Syncfusion Animation components to the project.

Installing Syncfusion® React packages

To use the Syncfusion® React Animation components in this project, the @syncfusion/react-base package needs to be installed using the following command:

npm install @syncfusion/react-base

Adding CSS reference

Import the Animation component’s required CSS references in src/App.css.

@import '../node_modules/@syncfusion/react-base/styles/material.css';

Adding Animation components

To include the animation components in your application, import them from the @syncfusion/react-base package in App.tsx.

import { Fade } from '@syncfusion/react-base';

Add the Fade component in application as shown in below code example.

import { useState } from 'react';
import { Fade } from '@syncfusion/react-base';
import { Button } from '@syncfusion/react-buttons';
import './animation.css';

export default function App() {
  const [show, setShow] = useState(true);

  return (
    <div style={{ height: '300px' }}>
      <Button onClick={() => setShow(!show)}>
        {show ? 'Hide' : 'Show'}
      </Button>
      <div className="animation-container">
        <Fade in={show} duration={500}>
          <div className="animation-box">Fade</div>
        </Fade>
      </div>
    </div>
  );
}

Run the project

To run the project, use the following command:

npm run dev

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

See also

• Syncfusion React Dialog