Clip-path not animated smoothly

[AlexanderGS 3 Likes (Newbie)]

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

[Cassie 5,069 Likes (Superhero)]

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.

 

timeline.fromTo(
  ".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,
  }
);