How can i create animations in reactjs?

Question

How can i do animations in react? Is there any useful package for this? Should i create a custom hook and make a script? I want to do an animated text and also a canvas to display a color as the mouse moves around.

This is my content

Main.js:

import React from 'react'
import Heading from '../organisms/Heading'
import Button from '../atoms/Button'
import './Main.css'

const Main = () => {
  return (
    <div className='main_container'>
        <section className="main" id="main">
        <div className="content">
            <h2>Hello, I´m <br/> <span>Mateo Ghidini</span></h2>
            <div className="animated-text">
                <h3>Web Designer</h3>
                <h3>Jr Full-stack Web Developer</h3>
            </div>
            <Button className="btn" content="See My Work"/>
            <div className="media-icons">
                <a href="https://www.linkedin.com/in/mghidini/"><i className="fab fa-linkedin-in"></i></a>
                <a href="https://github.com/mateoghidini1998"><i className="fab fa-github"></i></a>
            </div>
        </div>
    </section>
    </div>
  )
}

export default Main

John James · Accepted Answer · 2023-02-03 23:40:22Z

1

CSS animations. This way is the best for a simple animation. When you use it instead of importing javascript micro libraries, your bundle is smaller.
ReactTransitionGroup. This module has been developed by the guys from ReactJs community. Developers describe this library as:

“A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.”

edited Feb 3, 2023 at 23:40

answered Feb 3, 2023 at 23:39

John James

313 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can i create animations in reactjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related