How can I integrate GSAP with my React application?

How can I integrate GSAP with my React application?

You can integrate GSAP with React by installing the GSAP library and using it within your components. Would you like a code example?

Yes, please provide a code example.

First, install GSAP using npm: npm install gsap. Then, you can use it in your component like this:

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

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

  return <div className='my-element'>Animate me!</div>;
};

This will animate the element to move 100 pixels to the right.

What if I want to trigger the animation on a button click?

You can create a function that triggers the animation and call it on the button's onClick event. Here's how:

const MyComponent = () => {
  const animate = () => {
    gsap.to('.my-element', { duration: 1, x: 100 });
  };

  return (
    <div>
      <div className='my-element'>Animate me!</div>
      <button onClick={animate}>Click to Animate</button>
    </div>
  );
};