How can I use GSAP with React Hooks?

How can I use GSAP with React Hooks?

You can use GSAP with React Hooks by utilizing the useEffect hook to trigger animations when components mount or update.

Can you show me a simple example?

Sure! You can create a component that animates an element like this:

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

const MyComponent = () => {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.to(boxRef.current, { rotation: 360, duration: 2 });
  }, []);

  return <div ref={boxRef} style={{ width: 100, height: 100, backgroundColor: 'blue' }} />;
};

This will rotate a blue box 360 degrees when the component mounts.

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

You can modify the code to include a button and trigger the animation on click like this:

const MyComponent = () => {
  const boxRef = useRef(null);

  const handleClick = () => {
    gsap.to(boxRef.current, { rotation: 360, duration: 2 });
  };

  return (
    <>
      <div ref={boxRef} style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
      <button onClick={handleClick}>Animate</button>
    </>
  );
};

Thanks! This is really helpful.