CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-propsgsap
Rom-888
Rom-888

Reputation: 876

Animation of a component via React hooks. Gsap doesn't respond

I'm a bit lost in my component organisation and I have a problem to animate a component display.

I use the handleCart function to toggle the display state, then through the props, I attend to apply a gsap animation to show or hide the cart component, but it doesn't work. In the react dev tools I see that the state in the cart component changes when I clic on the cart button, but nothing happens ...

The cart button is the the header :

const Header = ({ history }) => {

    const [displayCart, setDisplayCart] = useState(false);
    
    const handleCart = () => {
        if (displayCart === false) {
          setDisplayCart(!displayCart);
        } else if (displayCart === true) {
          setDisplayCart(false);
        };
      }
    
      return (
        <header>
          <Cart display={displayCart} />
        </header>
      );
    };

And the cart component should display with the gsap animation :

const Cart = (props) => {

    let cartAnim = useRef(null);

   useEffect(() => {

        if (props.display === true) {
            gsap.to(cartAnim, {
                duration: 1,
                width: '30vw',
                ease: 'power3.inOut',
            });
        } else if (props.display === false) {
            gsap.to(cartAnim, {
                duration: 1,
                ease: 'power3.inOut',
                width: '0vw',
            });
        }
    }, [])


    return (
        <div ref={el => (cartAnim = el)} className="cart">
            <div className="menu">
                <button>Close</button>
            </div>
            <h1 id="panier">Panier</h1>

Upvotes: 0

Views: 212

Answers (1)

Rom-888
Rom-888

Reputation: 876

I find the solution by myself. Sorry.

I need to add props in the array at the end of the useEffect function :

 useEffect(() => {

        if (props.display === true) {
            gsap.to(cartAnim, {
                duration: 1,
                width: '30vw',
                ease: 'power3.inOut',
            });
        } else if (props.display === false) {
            gsap.to(cartAnim, {
                duration: 1,
                ease: 'power3.inOut',
                width: '0vw',
            });
        }
    }, [props])

Upvotes: 1

Related Questions