Share Posted August 24 It seems that the text that is animated with clipPath, is not being animated correct. The text just appears (and pops) instead of showing bit by bit what a mask would do. Is this a browser issue? See the Pen VwqLOgL by indy-meermans (@indy-meermans) on CodePen Link to comment Share on other sites More sharing options...
Solution Solution Share Posted August 24 Usually, the .from() method works fine since many values are predefined in CSS. However, when it comes to clip-path, the default value for clip-path I don't know. This is especially important for GSAP, as it aims to interpret strings accurately. To ensure compatibility, it's best to provide all values with % characters. // Instead of this polygon(100% 0, 100% 0, 100% 100%, 100% 100%) // Do this polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%) I've set the default clip-path in CSS (a full square) and updated some of your ScrollTrigger properties, so it was easer to test. Side note, instead of a random value of x: 2000, you can also use xPercent: 100, this will move the image 100 of it's own width and thus will work on any screen size. Hope it helps and happy tweening! See the Pen abPOgNo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 4 Link to comment Share on other sites More sharing options...
Author Share Posted August 24 Damn thanks @mvaneijgen, this would be something I would've search days for while the solution was to just add % to the value 😛, classic JS but logic when you know the issue haha 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