Jump to content


Polygon Tween not working in React

Moderator Tag
Go to solution Solved by OSUblake,

Recommended Posts

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.




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






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

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

Hi n.wantanabe, 


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




  • Like 1
Link to comment
Share on other sites

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

Happy tweening,


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.