Polygon Tween not working in React

[n.watanabe]

Hi. I use GSAP v3 with NextJS. I found that a gsap.to(duration, {"clip-path": polygon(...)} doesn't work well with ReactJS, which works on pure html/javascript/css environment (A working demo in pure html/javascript/css can be found in an answer by OSUblake in my previous question[1]. It has also other movements.)

In my attached demo, the top left corner moves from the left to right. However, :before element should expand from the top to the bottom. i.e. the bottom line should move from the top to the bottom.

Is this a bug or I'm using GSAP and React wrongly? I attached reproducible codepen in ReactJS.

Thank you in advance and sorry for continuous submissions.

 

[1]

 

I found related three articles that can help understanding using ReactJS and GSAP together.

 

https://greensock.com/docs/v3/GSAP/UtilityMethods/selector()

 

 

 

See the Pen popbKRO?editors=1111 by asterisk37n (@asterisk37n) on CodePen.

[Cassie]

From a brief glance, Blake's demo also has rotation and x values being animated.
 

gsap.to(".box", {
  "--rotation": "30deg",
  "--x": "100px",
  duration: 1,
  "--clipPath": "polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)"
});

 

See the Pen VwyjQEp by GreenSock (@GreenSock) on CodePen.

 

[n.watanabe]

Hi, Cassie. Yeah, His demo has rotation and x, but it has nothing to do here.  Below is a demo in pure html/javascript/css. It works finely as expected. However, when I write it in React, it doesn't work.

See the Pen ZEvOwBm by asterisk37n (@asterisk37n) on CodePen.

[OSUblake]

Hi n.wantanabe, 

 

You're original demo was using the beta version, which has this fix in place. 

 

 

 

[n.watanabe]

Hi, OSUblake. Solved! Awesome. Thank you for information. I'll take a look at the beta release. You all do great jobs.

Happy tweening,

Watanabe