Hello, need help converting v2 code to v3

[daryl.codes]

Need help adding this to my react app, Could anyone go thru this and help me convert the JS code.

 

Thanks

See the Pen mzBKaN by djnetherton (@djnetherton) on CodePen

[ZachSaucier]

Hey Daryl and welcome to the GreenSock forums. 

 

Our GSAP 3 migration guide is perfect for converting code from v2 to v3:

Here's how I'd write your animateIn function for example:

function animateIn(e) {
  e.stopPropagation();
  gsap.to(nav, { // no Max/Lite
    duration: 1.3, // duration in vars parameter
    width: 300, // no need for "" around numerical values unless you need to add units
    height: 300,
    borderTopLeftRadius: "30% 29%",
    borderTopRightRadius: "70% 26%",
    borderBottomRightRadius: "29% 74%",
    borderBottomLeftRadius: "71%",
    ease: "elastic" // use the condensed form for strings
  });

  gsap.to("nav ul", {
    duration: 0.4
    opacity: 1,
    ease: "none"
  }).delay(0.45);
}

Side note: none of the properties besides opacity are performant to animate. If you want it to animate more performantly you might consider using SVG and MorphSVGPlugin instead.

[daryl.codes]

Before that block of code, I still need to add useRef and useEffects?

 

 

 

[ZachSaucier]

You need to use refs and effects when appropriate. GSAP 3 doesn't magically remove the need for those.

[daryl.codes]

Just now, daryl.codes said:

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

let nav = useRef(null)

useEffect(() => {
    animateIn(e)
}, [])

let nav = document.getElementById("navigation");
nav.addEventListener("click", animateIn);

function animateIn(e) {
    e.stopPropagation();
    gsap.to(nav, { // no Max/Lite
      duration: 1.3, // duration in vars parameter
      width: 300, // no need for "" around numerical values unless you need to add units
      height: 300,
      borderTopLeftRadius: "30% 29%",
      borderTopRightRadius: "70% 26%",
      borderBottomRightRadius: "29% 74%",
      borderBottomLeftRadius: "71%",
      ease: "elastic" // use the condensed form for strings
    });
 
    gsap.to(nav, {
      duration: 0.4,
      opacity: 1,
      ease: "none"
    }).delay(0.45);
  }

function animateOut() {
    gsap.to(nav, {
        duration: 0.5,
        width: 30,
        height: 30,
        borderTopLeftRadius: "10%",
        borderTopRightRadius: "10%",
        borderBottomRightRadius: "10%",
        borderBottomLeftRadius: "10%",
        ease: "Power2"
    });

    gsap.to(nav, {
        duration: 0.2,
        opacity: 0,
        ease: "Linear"
    });
}

window.addEventListener("click", function() {
    //Hide the menus if visible
    animateOut();
});

 

 

[daryl.codes]

Hello, Zach, thanks for the help, Im getting a useeffect error.

[ZachSaucier]

Hey Daryl. Can you please create a minimal demo of the issue using CodePen, StackBlitz, or CodeSandbox? It's really hard for us to debug without seeing the error.