Keyframes are very glitchy when using scrolltrigger

[PatrickZimmermann 0 Likes (Newbie)]

I would love to use keyframes, but they seem to be very glitchy when I use them with scrolltrigger. It will often jump between the first and last keyframe while scrolling outside of start and end. I am not sure if I'm doing something wrong or not.

https://codesandbox.io/s/dreamy-banach-dixzdg?file=/src/animwrapper.js

[GreenSock 17,847 Likes (Superhero)]

I don't have much time to dig into this right now but I noticed two things: 

• I'm not sure why you're using a .from() tween for keyframes. They really only belong in a .to() intuitively. I'd recommend changing that.
• Your property names should generally be camelCased, so clipPath rather than "clip-path". I don't think that's causing errors here, I'm  just mentioning it. 
• Make sure you've got the latest version of GSAP - your sandbox does (3.10.2) but I just wanted to make sure you don't have a cached version or something - there was a regression in 3.9.1 related to .from() tweens with a ScrollTrigger.

[PatrickZimmermann 0 Likes (Newbie)]

Thanks for the quick reply!

Unfortunately changing ".from()" to ".to()" doesn't work.

A lower version of gsap shouldn't be cached, this is the only version I've used on that sandbox.

[Carl 11,048 Likes (Superhero)]

in order to effectively tween a clip-path it helps to have an initial clip-path in the css like:

 

.App {
  font-family: sans-serif;
  text-align: center;
  clip-path:circle(0% at 50% 50%);
}

 

better?

 

edit: looks like my fork didn't save the changes, please test in your version.

[PatrickZimmermann 0 Likes (Newbie)]

This works as far as I can tell.

Thank you very much!

In my actual project, I shouldn't use CSS for the starting position, but I was able to achieve the same result by using .fromTo() and setting the "from" point to the same value as the first keyframe like so:

useEffect(() => {

  gsap.fromTo(q(".App"), 0.75, {

    scrollTrigger: {

      trigger: ".App",

      markers: true,

      start: "top center",

      end: "bottom 30%",

      toggleActions: "play reverse play reverse"

    },

      clipPath: "circle(0% at 50% 50%)"

    },

    {

    scrollTrigger: {

      trigger: ".App",

      markers: true,

      start: "top center",

      end: "bottom 30%",

      toggleActions: "play reverse play reverse"

    },

    keyframes: {

      clipPath: ["circle(0% at 50% 50%)", "circle(75% at 50% 50%)"]

    }

  });

}, []);