Animating Clip Path Polygon

[JPM82]

Im trying to animate this polygon, but it starts at the bottom right corner.  I want it to move from left to right with the top and bottom points in sync.  What am I doing wrong here???

See the Pen qBVMmyE by Gemini7401 (@Gemini7401) on CodePen

[mikel]

Hey @JPM82,

 

That might have something to do with the pseudo element.
But I have no idea - not my area.

 

See the Pen ExbeQxd?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[GreenSock]

Sorry about any confusion there - it looks like a regression since 3.6.0 that'd cause only CSS variables that are complex values (more than one number) to neglect animating the others beyond the first value, but that has already been fixed in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

In the meantime, you can either use that beta file or I whipped together this cssVars plugin that'll work around it for you: 

gsap.registerPlugin({
  name: "cssVars",
  init(target, vars) {
    this.t = {};
    this.target = target;
    for (let p in vars) {
      this.t[p] = gsap.getProperty(target, p);
      this.add(this.t, p, this.t[p], vars[p]);
    }
  },
  render(ratio, data) {
    let pt = data._pt;
		while (pt) {
			pt.r(ratio, pt.d);
      data.target.style.setProperty(pt.p, data.t[pt.p]);
			pt = pt._next;
		}
  }
});

See the Pen RwjYqaZ?editors=0010 by GreenSock (@GreenSock) on CodePen

[n.watanabe]

@GreenSock

gsap-latest-beta.min.js solved! Thank you.

I'm happy if anyone knows how to import min.js on nextjs/reactjs.

[OSUblake]

The beta has been released, so need to worry about that. Just do a new npm install. 😉

[n.watanabe]

Yeah, I tried 3.10.0 and it works perfectly! Thank you so much. Happy tweening.