Jump to content


ClipPath pops instead of animating

Moderator Tag
Go to solution Solved by mvaneijgen,

Recommended Posts

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

  • Solution

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

  • Like 4
Link to comment
Share on other sites

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 :D

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.