Jump to content
Search Community

Glitch artifacts in GSAP 3

bdrtsky test
Moderator Tag

Recommended Posts

I was using GSAP in my apps for ages. But I ran into issues with GSAP 3.

 

https://vimeo.com/380463927

 

I use GSAP for leave/enter page transitions. As you can see there's some kind of jerking going on on the end of transition. When I do absolutely same animation with GSAP 2 or anime.js I have no issues.

 

leave(el, done) {
      gsap.to(el, 0.3, {
        y: '5px',
        opacity: 0,
        ease: 'none',
        onComplete: done,
      });
    },
    enter(el, done) {
      gsap.from(el, 0.3, {
        y: '5px',
        opacity: 0,
        ease: 'none',
        onComplete: done,
      });
    },

Any clues what is that? 

Link to comment
Share on other sites

Hey bdrtsky,

 

It's hard to say from that video what exactly is happening. My guess is that it has to do with the default overwrite behavior. Try setting gsap.defaults({overwrite: "auto"}); and see if that fixes the issue. If it does, you can just set it on the tweens that need it later on if you want to.

 

If it doesn't fix the issue, recreating the issue in a CodePen or something would be helpful for us.

  • Like 1
Link to comment
Share on other sites

6 hours ago, bdrtsky said:

I am not sure how to apply gsap.defaults({overwrite: "auto"})

 

You should set any defaults in your main file before animating anything. 

 

But that doesn't fix the problem. I think this is something that @GreenSock might need to investigate.

 

Just do this.

 

gsap.set(el, {
  opacity: 0,
  y: 5
});

gsap.to(el, {
  duration: 1,
  y: 0,
  opacity: 1,
  ease: "none",
  onComplete: done
});

 

  • Like 3
Link to comment
Share on other sites

It looks like this had to do with the lazy rendering feature that's a performance optimization (GSAP batches updates to avoid layout thrashing) - your project must have had a requestAnimationFrame (or something else) that was triggering the gsap.from() after GSAP had already done its rendering on that tick. In other words, it's a timing issue. I added some code to sense this condition and work around it in the next release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

In the mean time, you can simply set lazy:false on your tween(s) or even set that to the default like gsap.defaults({lazy:false});

 

Does that help? 

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