Jump to content


Clip-path not animated smoothly

Go to solution Solved by Cassie,

Recommended Posts

good evening!
This may seem like a silly question, but I don't understand why the clip-path isn't animated smoothly

See the Pen VwBdzZY by Alexxxsander (@Alexxxsander) on CodePen

Link to comment
Share on other sites

  • Solution

Hi there!


Just some numbers that GSAP is struggling to tween between.

If you make them all percentages it works fine. It's hard for GSAP to animate between 0 and 100% as they're different units.


  ".home__text span",
    y: 30,
    clipPath: "polygon(100% 100%, 0% 100%, 0% 100%, 100% 100%)"
    y: 0,
    clipPath: "polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%)",
    duration: 0.8,
    stagger: 0.2,


  • Like 2
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.