Jump to content
Search Community

ClipPath pops instead of animating

IndM test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

  • 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

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.
  • Create New...