Creating Custom and Reusable Animations with the Web Animations API and ReactJS
  1. JavaScript
  2. React.js

Creating Custom and Reusable Animations with the Web Animations API and ReactJS

Written by Posted on Less than 0 min read

In today’s digital age, animations have become an integral part of web design. They add a dynamic element to the user interface, making it more engaging and interactive. Animations not only enhance the visual appeal of the website but also provide valuable feedback to users, indicating that the website is responding to their actions.

In this blog post, we will explore the use of the Web Animations API and ReactJS to create custom and reusable animations. The Web Animations API is a powerful tool that allows developers to create animations using a set of JavaScript classes and methods. ReactJS, on the other hand, is a popular JavaScript library that simplifies the process of building user interfaces.

By integrating these two technologies, we can create complex animations that are easy to use and maintain. In the following sections, we will delve into the specifics of these technologies, discuss best practices for creating reusable animations, and provide examples to illustrate how to create custom animations using the Web Animations API and ReactJS.

What is the Web Animations API?

The Web Animations API is a JavaScript API that allows developers to create smooth and efficient animations on web pages. It provides a set of JavaScript classes and methods for creating, controlling, and manipulating animations.

The Web Animations API works by creating animations as instances of the Animation class. The Animation class represents a single animation and has methods to control its playback, such as play(), pause(), and reverse(). Animations can be created using keyframes, which define the starting and ending points of the animation. The Web Animations API also allows developers to define animations using CSS styles, making it easier to work with existing CSS code.

The advantages of using the Web Animations API include
  1. Performance: The Web Animations API is designed to be optimized for performance, resulting in smoother and more efficient animations.
  2. Flexibility: The API provides developers with greater control over animations, allowing them to create custom and complex animations that are not possible with traditional CSS animations.
  3. Compatibility: The Web Animations API is supported by all modern web browsers, making it a reliable and accessible solution for creating animations.

Overall, the Web Animations API is a powerful tool for creating dynamic and engaging animations on web pages, and its flexibility and performance make it an excellent choice for developers.

Integrating the Web Animations API with ReactJS

Integrating the Web Animations API with ReactJS can greatly enhance the visual appeal and interactivity of web pages. Here are the steps to integrate the two technologies:

  1. Create a React project: To start, create a new React project using the create-react-app command in the terminal.
npx create-react-app my-app
  1. Install the Web Animations API: Next, install the Web Animations API by running the following command in the terminal.
npm install web-animations-js
  1. Import the Web Animations API: Import the Web Animations API in the React component where you want to use it.
import 'web-animations-js'; // Import the Web Animations API
import React, { useRef } from 'react';

function AnimationComponent() {
  const ref = useRef(null);

  const playAnimation = () => {
    const element = ref.current;
    const animation = element.animate(
      // Define animation keyframes
      [{ opacity: 0 }, { opacity: 1 }],
      // Define animation options
      {
        duration: 1000,
        easing: 'ease-in-out',
        fill: 'forwards',
      }
    );
    animation.play(); // Play the animation
  };

  return (
    <div ref={ref} onClick={playAnimation}>
      Click to Play Animation
    </div>
  );
}

export default AnimationComponent;
  1. Explanation of the Animation class and its methods: The Animation class is the main class used in the Web Animations API to create and control animations. It has several methods, including play(), pause(), and reverse(), which allow you to control the playback of the animation. Additionally, the Animation class has properties like currentTime and playbackRate that allow you to adjust the timing and speed of the animation.
  2. Creating custom animations with ReactJS and the Web Animations API: To create a custom animation with ReactJS and the Web Animations API, define the keyframes for the animation and pass them as an argument to the animate() method of the Animation class. You can also define options for the animation, such as the duration and easing function.
import 'web-animations-js';
import React, { useRef } from 'react';

function AnimationComponent() {
  const ref = useRef(null);

  const playAnimation = () => {
    const element = ref.current;
    const animation = element.animate(
      // Define animation keyframes
      [
        { transform: 'translateX(0px)' },
        { transform: 'translateX(100px)' },
        { transform: 'translateX(0px)' },
      ],
      // Define animation options
      {
        duration: 1000,
        easing: 'ease-in-out',
        fill: 'forwards',
      }
    );
    animation.play(); // Play the animation
  };

  return (
    <div ref={ref} onClick={playAnimation}>
      Click to Play Animation
    </div>
  );
}

export default AnimationComponent;
  1. Using animations as React components: You can also use animations as React components by encapsulating the animation code within a component and passing props to control the animation. This makes it easy to reuse the animation in multiple parts of the application.
import 'web-animations-js';
import React, { forwardRef } from 'react';

const AnimationComponent = forwardRef((props, ref) => {
  const playAnimation = () => {
    const animation = ref.current.animate(
      // Define animation keyframes
      [{ opacity: 0 }, { opacity: 1 }],
      // Define animation options
      {
        duration: 1000,
        easing: 'ease-in-out',
        fill: 'forwards',
      }
    );

    animation.play(); // Play the animation
  };

  return (
  <div ref={ref} onClick={playAnimation}>
    {props.children}
  </div>
  );
});

This AnimationComponent can be used like any other React component, and you can pass props to control the animation. For example:

function App() {
  const ref = React.createRef();

  return (
    <div>
      <AnimationComponent ref={ref}>
        <h1>Hello World!</h1>
      </AnimationComponent>
    </div>
  );
}

In conclusion, integrating the Web Animations API with ReactJS allows you to create custom and reusable animations that enhance the user experience on your website. With the Animation class and its methods, you have complete control over the playback of animations, and with React components, you can easily reuse animations throughout your application.

Best practices for creating reusable animations with the Web Animations API and ReactJS

When creating reusable animations with the Web Animations API and ReactJS, there are some best practices to keep in mind.

  1. Keeping animations separate from component logic: It’s important to keep animations separate from component logic to make it easier to reuse the animations in different components. By separating the animation logic from the component logic, you can also avoid cluttering the component with too much code.
// Bad example
function Button(props) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <button
      style={{
        backgroundColor: isHovered ? 'blue' : 'red',
        color: 'white',
        padding: '10px',
        borderRadius: '5px',
        cursor: 'pointer',
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {props.label}
    </button>
  );
}

// Good example
function Button(props) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <button
      className="Button"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {props.label}
      <HoverAnimation isActive={isHovered} />
    </button>
  );
}

function HoverAnimation(props) {
  const ref = useRef(null);
  const animation = useAnimation(ref, {
    opacity: [0, 1],
    transform: ['scale(0.9)', 'scale(1)'],
    easing: 'ease-in-out',
    duration: 300,
    fill: 'forwards',
  });

  useEffect(() => {
    if (props.isActive) {
      animation.play();
    } else {
      animation.reverse();
    }
  }, [props.isActive]);

  return <div ref={ref} className="HoverAnimation" />;
}
  1. Using props and state to control animations: By using props and state to control animations, you can make your animations more dynamic and customizable. For example, you can pass in the duration, easing function, and other animation properties as props to make the animation more flexible.
function Button(props) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <button
      className="Button"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {props.label}
      <HoverAnimation
        isActive={isHovered}
        duration={props.duration}
        easing={props.easing}
      />
    </button>
  );
}

function HoverAnimation(props) {
  const ref = useRef(null);
  const animation = useAnimation(ref, {
    opacity: [0, 1],
    transform: ['scale(0.9)', 'scale(1)'],
    easing: props.easing,
    duration: props.duration,
    fill: 'forwards',
  });

  useEffect(() => {
    if (props.isActive) {
      animation.play();
    } else {
      animation.reverse();
    }
  }, [props.isActive]);

  return <div ref={ref} className="HoverAnimation" />;
}
  1. Creating animation helpers for commonly used animations: If you find yourself reusing the same animation logic in multiple components, it’s a good idea to create an animation helper that encapsulates the animation logic. This can make it easier to reuse animations throughout your application and keep your code more organized.
function FadeInAnimation(ref, duration = 300) {
  const animation = useAnimation(ref, {
    opacity: [0, 1],
    easing: 'ease-in-out',
    duration,
    fill: 'forwards',
  });

  useEffect(() => {
    animation.play();
  }, []);

  return <div ref={ref} className='FadeInAnimation' />;
}

function FadeInComponent(props) {
  const ref = useRef(null);

  return (
    <div className='FadeInComponent'>
      {props.children}
      <FadeInAnimation ref={ref} duration={props.duration} />
    </div>
  );
}

By following these best practices, you can create reusable animations with the Web Animations API and ReactJS that are flexible, dynamic, and easy to use.

Examples of custom and reusable animations with the Web Animations API and ReactJS

Here are some examples of custom and reusable animations that can be created with the Web Animations API and ReactJS:

Example 1: Creating a fade-in animation

A fade-in animation can be used to gradually reveal an element on the page. Here’s an example of how to create a reusable fade-in animation component using the Web Animations API and ReactJS:

function FadeInAnimation(props) {
  const ref = useRef(null);
  const animation = useAnimation(ref, {
    opacity: [0, 1],
    duration: props.duration,
    easing: 'ease-in-out',
  });

  useEffect(() => {
    animation.play();
  }, []);

  return <div ref={ref} className="FadeInAnimation" />;
}

function FadeInComponent(props) {
  const ref = useRef(null);

  return (
    <div className="FadeInComponent">
      {props.children}
      <FadeInAnimation ref={ref} duration={props.duration} />
    </div>
  );
}

This fade-in animation component can be used in any ReactJS component by simply wrapping the content that needs to be animated with the FadeInComponent component and passing in the duration prop.

Example 2: Creating a bouncing ball animation

A bouncing ball animation can be used to add some fun and whimsy to a website. Here’s an example of how to create a reusable bouncing ball animation component using the Web Animations API and ReactJS:

function BouncingBallAnimation(props) {
  const ref = useRef(null);
  const animation = useAnimation(ref, {
    transform: ['translateY(0)', `translateY(${props.height}px)`],
    easing: 'ease-in-out',
    duration: props.duration,
    iterations: 'Infinity',
    direction: 'alternate',
  });

  useEffect(() => {
    animation.play();
  }, []);

  return <div ref={ref} className="BouncingBallAnimation" />;
}

function BouncingBallComponent(props) {
  const ref = useRef(null);

  return (
    <div className="BouncingBallComponent">
      {props.children}
      <BouncingBallAnimation ref={ref} duration={props.duration} height={props.height} />
    </div>
  );
}

This bouncing ball animation component can be used in any ReactJS component by simply wrapping the content that needs to be animated with the BouncingBallComponent component and passing in the duration and height props.

Example 3: Creating a carousel animation

A carousel animation can be used to create a slideshow of images or other content on a website. Here’s an example of how to create a reusable carousel animation component using the Web Animations API and ReactJS:

function CarouselAnimation(props) {
  const ref = useRef(null);
  const animation = useAnimation(ref, {
    transform: [`translateX(0)`, `translateX(-${props.width}px)`],
    easing: 'ease-in-out',
    duration: props.duration,
    iterations: 'Infinity',
    direction: 'alternate',
  });

  useEffect(() => {
    animation.play();
  }, []);

  return (
    <div ref={ref} className="CarouselAnimation">
      {props.children}
    </div>
  );
}

function CarouselComponent(props) {
  const ref = useRef(null);

  return (
    <div className="CarouselComponent">
      <CarouselAnimation ref={ref} duration={props.duration} width={props.width}>
        {props.children}
      </CarouselAnimation>
    </div>
  );
}

This carousel animation component can be used in any ReactJS component by simply wrapping the content that needs to be animated with the CarouselComponent component and passing in the duration and width props.

In these examples, we’ve demonstrated how to create custom and reusable animations using the Web Animations API and ReactJS. These animations can be used to add some visual interest to a website and help to create a more engaging user experience.

Remember to always keep best practices in mind when creating animations, such as keeping animations separate from component logic, using props and state to control animations, and creating animation helpers for commonly used animations. With these tips in mind, you can create beautiful and functional animations for your ReactJS projects.

Conclusion

In conclusion, the Web Animations API and ReactJS provide a powerful combination for creating custom and reusable animations. The Web Animations API allows developers to create complex and high-performance animations with ease, while ReactJS provides a convenient and efficient way to manage the state of these animations.

By following best practices such as separating animations from component logic, using props and state to control animations, and creating animation helpers, developers can create beautiful and functional animations for their ReactJS projects.

Animations can greatly enhance the user experience of a website or application, providing visual interest and interactivity. With the Web Animations API and ReactJS, developers can create dynamic and engaging animations that are sure to impress.

In conclusion, if you are looking to add some visual flair to your web projects, consider using the Web Animations API and ReactJS to create custom and reusable animations. The possibilities are endless, and the end result will be sure to captivate your audience.

More from Voskan

Building a Custom API Gateway with Node.js and Express Middleware: A Step-by-Step Guide
  1. Node.js

Building a Custom API Gateway with Node.js and Express Middleware: A Step-by-Step Guide

API gateway is a vital component of modern microservices architecture, providing a single entry point for all external requests to backend services. It serves as a reverse proxy that abstracts away the complexity of the underlying services and provides a unified interface for the clients. An API gateway offers several benefits, including enhanced security, improved […]
Written by
Building Real-Time Applications with Node.js and Redis Pub/Sub
  1. Node.js

Building Real-Time Applications with Node.js and Redis Pub/Sub: A Comprehensive Guide

Building real-time applications has become increasingly popular in recent years, and Node.js and Redis pub/sub have emerged as one of the most powerful combinations for this task. The event-driven architecture of Node.js and the efficient pub/sub messaging pattern of Redis make them ideal tools for building real-time applications that can handle large amounts of data […]
Written by
Building and Deploying Serverless Applications with Node.js and AWS
  1. Node.js

Node.js and Serverless Architecture: A Complete Guide to Building and Deploying Applications

Serverless architecture is a relatively new concept in the world of web development, and it’s quickly gaining popularity among developers. The main advantage of this architecture is that it allows developers to focus on writing code without worrying about server management and maintenance. In this article, we’ll take a closer look at how Node.js can […]
Written by
How to Integrate MongoDB and Elasticsearch in a Node.js Project
  1. Elasticsearch
  2. MongoDB
  3. Node.js

How to Integrate MongoDB and Elasticsearch in a Node.js Project: A Step-by-Step Guide

In this blog post, we will be discussing how to integrate MongoDB and Elasticsearch in a Node.js project. MongoDB is a popular NoSQL database that is used to store unstructured data. Elasticsearch, on the other hand, is a search engine that is used to search and analyze structured and unstructured data. Integrating MongoDB and Elasticsearch […]
Written by
How to Use React Query for Efficient Data Fetching and Caching in Your App
  1. React.js

How to Use React Query for Efficient Data Fetching and Caching in Your App

Explanation of React Query React Query is a powerful JavaScript library that simplifies and optimizes data fetching and caching in React applications. It provides a single, unified API for fetching data from multiple sources, including APIs, databases, and even other queries, and offers an intelligent caching system that helps avoid redundant network requests. React Query […]
Written by
How to Implement a Serverless Backend for Your React App Using AWS Amplify
  1. React.js

How to Implement a Serverless Backend for Your React App Using AWS Amplify

In recent years, serverless architecture has become a popular choice for building modern web applications. A serverless backend refers to an architecture where the backend logic is completely abstracted away from the infrastructure, and the application is built using managed services provided by cloud providers. This approach enables developers to focus solely on the application […]
Written by
10 Common JavaScript Mistakes and How to Avoid Them
  1. JavaScript

10 Common JavaScript Mistakes and How to Avoid Them – Best Practices for JavaScript Development

In today’s fast-paced digital world, JavaScript is an essential programming language that is widely used for developing web applications, mobile apps, and desktop software. It is a versatile language that offers a wide range of features and functionalities, allowing developers to create dynamic and interactive web pages. However, as with any programming language, there are […]
Written by
Next
No Comments
Leave a comment Cancel
Comments to: Creating Custom and Reusable Animations with the Web Animations API and ReactJS

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.