Glitch artifacts in GSAP 3

[bdrtsky 32 Likes (Newbie)]

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? 

[ZachSaucier 7,133 Likes (Superhero)]

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.

[bdrtsky 32 Likes (Newbie)]

@ZachSaucier thanks for reply. I made a repro - https://codesandbox.io/s/jovial-moser-fk4lq

Animations are in the App.vue file. 

If you change GSAP 3 to GSAP 2 all is fine. This behavior is not expected.

 

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

[OSUblake 18,477 Likes (Superhero)]

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
});

 

[bdrtsky 32 Likes (Newbie)]

hello @GreenSock

if anything I can do from my side to help to investigate this issue, please tell

[GreenSock 18,293 Likes (Superhero)]

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? 

[bdrtsky 32 Likes (Newbie)]

@GreenSock yes, this indeed fixing the issue! Awesome, thank you! 

 

You absolutely right, this is requestAnimationFrame issue, since Vue.js using it internally in it's `transition` component - https://github.com/vuejs/vue/blob/59d4351ad8fc042bc263a16ed45a56e9ff5b013e/src/platforms/web/runtime/transition-util.js