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

Best Practices for Testing React Components using Jest and Enzyme
  1. JavaScript
  2. React.js

Best Practices for Testing React Components using Jest and Enzyme

React has become one of the most popular front-end libraries for building web applications. With its component-based architecture, it’s easier to build and maintain complex user interfaces. However, as your application grows, it becomes increasingly important to ensure that it works as expected and doesn’t break with every change. That’s where testing comes in. In […]
Written by
Mastering the Metaverse with React, Three.js, and A-Frame: Create Immersive Virtual Environments
  1. JavaScript
  2. React.js
  3. Three.js - JavaScript 3D library

React, Three.js, and A-Frame: Unlocking the Power of Web-Based Virtual Experiences in the Metaverse

In recent years, the Metaverse has emerged as a groundbreaking concept that is reshaping the digital landscape. As a convergence of virtual and augmented reality, the Metaverse allows users to immerse themselves in interactive, shared virtual experiences. The growing importance of the Metaverse cannot be understated, as it unlocks endless possibilities for social interaction, entertainment, […]
Written by
Mastering the Factory Pattern in JavaScript: Boost Object Creation & Encapsulation
  1. JavaScript
  2. JavaScript Design Patterns

Unleash the Power of the Factory Pattern in JavaScript Development

In the world of software development, design patterns play a crucial role in crafting efficient, maintainable, and scalable code. One such design pattern, the Factory Pattern, has gained significant popularity among JavaScript developers. This powerful pattern simplifies object creation and encapsulation, providing numerous benefits that can greatly improve the overall quality and structure of your […]
Written by
Ultimate Guide to Monitoring and Logging Node.js Apps with ELK Stack, Prometheus & Grafana
  1. Elasticsearch
  2. Node.js

Monitor & Log Node.js Applications: Master ELK Stack, Prometheus, and Grafana

The success of any modern web application depends on its performance, reliability, and the ability to quickly diagnose and resolve issues. Monitoring and logging are essential practices that enable developers to keep a close eye on the health and performance of their Node.js applications. In this comprehensive guide, we will discuss the importance of monitoring […]
Written by
Elasticsearch Query DSL & Node.js: Master the Art of Search Queries
  1. Elasticsearch
  2. Node.js

Mastering Elasticsearch Query DSL in Node.js Applications: A Comprehensive Guide

In today’s data-driven world, the ability to quickly and effectively search and analyze large volumes of data has become crucial. Elasticsearch, a powerful and scalable search engine, has emerged as a popular choice for developers and organizations seeking to implement advanced search functionality in their applications. One of Elasticsearch’s key features is its Query Domain-Specific […]
Written by
Complete Tutorial on React Authentication using JWT and Redux Toolkit | JWT Authentication in React
  1. React.js
  2. Redux

Mastering Authentication in React Apps with JWT and Redux Toolkit: A Comprehensive Guide

React is a popular, open-source JavaScript library for building user interfaces or UI components. It’s maintained by Facebook and a community of individual developers and companies. React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It […]
Written by
Integrating Node.js with RabbitMQ Message Queues
  1. Node.js
  2. RabbitMQ

Integrating Node.js with RabbitMQ Message Queues: A Comprehensive Guide

Node.js is an open-source, cross-platform, JavaScript runtime environment built on the V8 JavaScript engine of Google Chrome. It is commonly used for building scalable network applications and is popular for its event-driven, non-blocking I/O model that enables developers to create high-performance, real-time web applications. Node.js is ideal for developing server-side applications that require fast, asynchronous […]
Written by
Advanced Parallel Computing Techniques with Node.js and Worker Threads
  1. Node.js

Advanced Parallel Computing Techniques with Node.js and Worker Threads

Parallel computing is a technique for improving the performance and scalability of computer programs by dividing them into smaller, independent tasks that can be executed concurrently on multiple processing units. With the increasing demand for more powerful and responsive web applications, parallel computing has become an essential tool for developers to optimize the performance of […]
Written by
Node.js Custom CDN: Create Your High-Performance Content Delivery Network
  1. Node.js

Build a High-Performance Custom Content Delivery Network (CDN) with Node.js

In today’s fast-paced digital world, the performance of web applications is crucial for providing an exceptional user experience. Content Delivery Networks (CDNs) have become an indispensable tool to achieve optimal performance, ensuring that web content is delivered quickly and efficiently to users across the globe. In this comprehensive guide, we’ll explore the benefits of building […]
Written by
Error Handling in React, GraphQL & Redux Toolkit: Enhance Your Web Applications
  1. GraphQL
  2. React.js
  3. Redux

Mastering Error Handling in React Applications with GraphQL and Redux Toolkit: Best Practices and Techniques

In today’s rapidly evolving world of web applications, delivering a seamless and user-friendly experience has become more crucial than ever. One key aspect of achieving this is effective error handling, which helps ensure that users encounter minimal roadblocks while interacting with your application. This article will explore the best practices and techniques for error handling […]
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.