Jump to content
Search Community

Polygon Tween not working in React

n.watanabe test
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.

 

[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

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.
×
×
  • Create New...