Clip Path Animation. Left side jumps end???

[tslevack]

Just starting out.  Trying to animate clip-path on scroll. It's working but the left side doesn't transition out.. It just jumps to end, the the right side plays fine.   Can anyone see what Im missing??? thanks

 

T

See the Pen zYyQOJQ by tlevack (@tlevack) on CodePen

[mvaneijgen]

Hi @tslevack welcome to the forum!

 

I've changed your inset clip-path to a polygon one, which does not have that jump. Personally I've never used an inset() clip-path, so I don't know what it needs exactly. I always use https://bennettfeely.com/clippy/ to create my clip-path's which always works perfect for me (keep in mind that you will need to suffix every number with a % sign, to fix unexpected results) 

 

Also the ScrollTrigger object does not have a property called ease. The snap property does, but your are not using that, or if you want all your tweens to have a default ease you can set it in the defaults: {} object. I've set it to none, which 'feels' nice with scrubbed ScrollTriggers, but change it to what ever you like. 

 

Hope it helps and happy tweening! 

 

See the Pen NWeVqZM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi @tslevack and welcome to the GSAP forums!

 

This seems related to the fact that the last value jumps to zero as the animation starts.

 

A solution is to use a polygon instead:

See the Pen oNJRjNL by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[tslevack]

Thank you both.   I will try this method.