Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bdrtsky

Glitch artifacts in GSAP 3

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? 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×