basic concurrency between two tweens (with react)

[amapic]

Hi,

 

It must be a very simple problem but I have already spent a lot of time on it. I have a classic implementation with react of onEnter, on leave function on a html tag:

<div

onMouseEnter={onEnter}
        onMouseLeave={onLeave}
>

 

 

const onLeave = ({ currentTarget }) => {
    // gsap.to(currentTarget, { backgroundColor: "#28a92b", scale: 1 });
    gsap.to(currentTarget, {
      // clipPath:"polygon(50% 0, 50% 0,100% 50%, 50% 100%, 50% 100%,0 50%);"
      clipPath: "polygon(0 0, 0 0,0 0%, 0% 0%, 0% 0%,0 0%);",
    }); // <-- gets added to the Context!
  };

  const onEnter = ({ currentTarget }) => {
    // gsap.to(currentTarget, { backgroundColor: "#e77614", scale: 1.2 });
    gsap.to(currentTarget, {
      clipPath: "polygon(25% 0, 75% 0%, 100% 50%,75% 100%, 25% 100%,  0 50%)",
    });
  };

 

 

Only the first one (onEnter) is working here. If I permute them, the first one keeps being the only one working. So it must be a problem of conflict between the two tweens.

My code is accessible here https://codesandbox.io/p/github/amapic/planet_next3/draft/vigilant-banzai 

I would like the clipPath to evolve in the header component. The code is in the file located at components/header.jsx

I tried this before with using "context" as it is mandatory normally with react but I had exactly the same problem, only the first one was triggerring. My code for this is present and commented in the file.

How would you do ? Sorry for the style of the text here.

See the Pen by (@) on CodePen

[Rodrigo]

Hi,

 

There is an error in your codesandbox:

./pages/index.jsx:16:0
Module not found: Can't resolve '../components/PanneauGauche'
  14 | import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
  15 | 
> 16 | import PanelGauche from "../components/PanneauGauche";
  17 | 
  18 | extend({ TextGeometry });
  19 | 

https://nextjs.org/docs/messages/module-not-found

The only thing I can spot based on your code is that clipPath animations should use percentages in all the numbers, even zeroes.

clipPath: "polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);",

Hopefully this helps. If you keep having issues, please check that your minimal demo is working.

Happy Tweening!

[fakesamgregory]

While it doesn’t directly solve your issue, consider using CSS in this instance. I can’t see the result in your Codepen to know if this entirely relevant. 

[amapic]

Thank you