Animate a clip path on a pseudo element with scrolltrigger

[Jloafs]

Hi guys

 

I'm trying to animate a clip-path on the pseudo :after element on multiple blocks using scrolltrigger.

 

No idea at all why this isn't working - can anyone spot my (probably multiple) errors?

 

Many thanks in advance.

See the Pen eYKqZVj by jloafs-DM (@jloafs-DM) on CodePen

[GreenSock]

Browsers won't allow JavaScript to access any pseudo elements. It's like they're ghosts

 

So you can simply use CSS variables to do something like that:

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

 

Also, be careful that you don't apply CSS transitions to the same elements you're animating with GSAP. It's terrible for performance, totally wasteful, and the CSS transitions will make the GSAP animations take longer because every time GSAP makes a change, the CSS transition interrupts and says "nope! I'm gonna drag that out for ___ seconds".

 

And you don't have to create a timeline if you're just gonna populate it with one tween. You can just use a tween instance to simplify things. 

 

I hope that helps. 

[Jloafs]

Thanks so much - that's perfect!