Jloafs Posted December 15, 2022 Share Posted December 15, 2022 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted December 15, 2022 Solution Share Posted December 15, 2022 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. 2 Link to comment Share on other sites More sharing options...
Jloafs Posted December 16, 2022 Author Share Posted December 16, 2022 Thanks so much - that's perfect! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now