Jump to content
GreenSock

PatrickZimmermann

Keyframes are very glitchy when using scrolltrigger

Go to solution Solved by PatrickZimmermann,

Recommended Posts

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

  • Solution

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%)"]
    }
  });
}, []);
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.
×