How do I use GSAP with React?

How do I use GSAP with React?

You can use GSAP with React by installing the GSAP library and then using it in your components to create animations.

What is the best way to install GSAP in a React project?

You can install GSAP using npm by running npm install gsap in your project directory.

Can you show me a simple example of using GSAP in a React component?

Sure! Here's a basic example:

import React, { useEffect } from 'react';
import { gsap } from 'gsap';

const MyComponent = () => {
  useEffect(() => {
    gsap.to('.box', { duration: 1, x: 100 });
  }, []);

  return <div className='box'>Animate me!</div>;
};

What if I want to trigger animations on scroll?

You can use the ScrollTrigger plugin from GSAP to trigger animations based on scroll position.