ClipPath Scrolltrigger Scrub animation

[terrorbyrd]

I have a couple of projects where I am trying to animate a clip-path (rough example in Codepen) however, having issues with it just jumping to the final and not scrubbing along with the animation. 

See the Pen ZEZQjaP by terrorbyrd (@terrorbyrd) on CodePen

[mvaneijgen]

Hi @terrorbyrd welcome to the forum and thanks for being a club member! 

 

When animating clip-path (or complex strings) with GSAP it is best to have the same amount of points and have everything have the same suffix. I've written some things down to explain things better, check out the post below. 

 

 

Next to that your issue at the moment is that your ScrollTrigger is done before it has even started. I've disabled all your ScrollTriggers and just left the one you're having issues with. ScrollTrigger works by animating a tween between the start and end markers hooked to the scrollbar. When the green markers touch the animation starts. and when the end markers touch it ends, but as you can see in your case the red marker is already past the end before the green markers has even touched, so ScrollTrigger sees it needs to start and then directly jumps to the end. You can easily fix this by setting end:  "bottom 80%" in your ScrollTrigger. Hope it helps and happy tweening! 

 

Side note: When wanting to tween percent based values, be sure to use xPercent and yPercent, then you can just use numbers instead of strings 

 

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

[terrorbyrd]

Thanks for your response, just to confirm your demo just kind of jumps to the end point instead of scrubbing to change? 

 

 

[mvaneijgen]

Yes it does! It is to illustrate the problem you're having. 

1 hour ago, mvaneijgen said:

You can easily fix this by setting end:  "bottom 80%"

Just update the end trigger as I suggested and your issue is fixed.

 

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

[terrorbyrd]

Missed this, Genius! 

 

Thank you @mvaneijgen!!