ScrollTrigger Margin Top animation causes flicker when scrolling "fast"

[Joao.Ventura]

Hello Greensock forums,

This is my second time using Gsap / ScrollTrigger. And I'm running into what I think is a performance issue, but more probably an implementation error on my part.

The issue I'm having is while animating the margin-top property of an element on scroll, so that it overlaps with the text above it.

I get the desired effect, however, when I scroll "fast" (I put quotes around fast because I don't think it's that fast), I get a white flickering bar either at the top or bottom of the screen, depending on the scroll direction.

You can see what I mean in this video : 

https://streamable.com/iatfd7

Some additional info: 

- There is no flicker if I deactivate the margin-top animation part of my javascript.

- I'm using a particles library called tsparticles, which I thought could be causing performance issues but deactivating it doesn't help the flickering.

- I'm using a library called Fitty to make certain texts take as much space(width) as possible. Then when fitty resizes my text, an event gets fired. I bind the creation of my ScrollTrigger animation to that event, so that I can get the height of the element. That height is what I use to tell ScrollTrigger how much margin to give my animated elements.

For instance : 

let tlPreserve = gsap.timeline();

fitties[0].element.addEventListener('fit', function(e){
  if(ScrollTrigger.getById("preserve") != null)
  {
    ScrollTrigger.getById("preserve").kill(true);
  }

  let margin = "-"+document.querySelector('#preserve-title').clientHeight / 2+"px";
  if(ScrollTrigger.getById("preserve") != null)
  {
    ScrollTrigger.getById("preserve").kill(true);
  }
  tlPreserve.to('#preserve-row-1', {
    marginTop: margin,
    scrollTrigger: {
      trigger:'#preserve-row-1',
      endTrigger: '#preserve-title',
      start: 'top bottom',
      end: 'bottom top',
      scrub: 1,
      id:"preserve",
      // markers: true
    }
  });
});

 

Here's the codepen: 

See the Pen wvJwGwV by masteryder (@masteryder) on CodePen

 

If you have any idea of what I'm doing wrong, it would be of great help. Thanks, João
 

See the Pen RwKXMqZ by masteryder (@masteryder) on CodePen

Edited May 4, 2021 by Joao.Ventura
Added Older version of code to original post

[qlpo]

my macbook freeze's if I scroll over that codepen 😳😳

[Joao.Ventura]

3 minutes ago, qlpo said:

my macbook freeze's if I scroll over that codepen 😳😳

Wow, lemme deactivate the particles then. Does it freeze for you still ? 

[qlpo]

1 minute ago, Joao.Ventura said:

Wow, lemme deactivate the particles then. Does it freeze for you still ? 

it doesn't freeze now.

[GreenSock]

It was very difficult for me to get that effect to happen, and it's super difficult to troubleshoot when you've got so much going on and so many other factors to consider. There's almost 500 lines of CSS alone. I'd strongly recommend creating a minimal demo with only the absolutely necessary things to recreate the issue. 

• You've got CSS transitions and CSS animations - be very careful about those. Don't have them applied to anything that GSAP is animating. 
• You've got several other non-GreenSock libraries at play. Those very well may be the culprit. I'm not familiar with any of them. I'd remove them all and see if you can still notice any issues. 
• Avoid any CSS filters or effects like box-shadow because they're very expensive for the browser to render. I noticed you've got box-shadows applied. 
• If you can possibly animate things like x/y (transforms) instead of margin/top/left, you'll get much better performance. Right now, you're animating margin which directly affects layout, so the browser is forced to re-flow things 60 times per second. 

I hope that gets you going in a good direction. If you need more help, we'd be glad to take a look at a minimal demo. 

[Joao.Ventura]

2 hours ago, GreenSock said:

You've got CSS transitions and CSS animations - be very careful about those. Don't have them applied to anything that GSAP is animating. 

I've verified and I'm only applying transitions to the underline of the links, for the sake of the minimal demo, I removed those too.

2 hours ago, GreenSock said:

There's almost 500 lines of CSS alone

I tried to remove some of them 😅

2 hours ago, GreenSock said:

You've got several other non-GreenSock libraries at play. Those very well may be the culprit. I'm not familiar with any of them. I'd remove them all and see if you can still notice any issues. 

I have removed Splide, tsParticles and fitty from the demo too, I set the titles (that are used for computing of the margin) to a fixed font-size. The only thing there other than GSAP now is bootstrap.

2 hours ago, GreenSock said:

Avoid any CSS filters or effects like box-shadow because they're very expensive for the browser to render. I noticed you've got box-shadows applied. 

Removed the box-shadow from the demo as well.

2 hours ago, GreenSock said:

If you can possibly animate things like x/y (transforms) instead of margin/top/left, you'll get much better performance. Right now, you're animating margin which directly affects layout, so the browser is forced to re-flow things 60 times per second. 

The problem with animating the transform for this case is that it adds unwanted white space below the element being animated, if you have an idea of how to have the same overlapping effect without the negative margin-top I'm all ears though

 

 

Even after all the changes, the effect is present : 

https://streamable.com/m82hf0

 

Here's the more minimal demo : 

Edited May 4, 2021 by Joao.Ventura
Added minimal-er demo

[Cassie]

Hi Joao!

Thanks for minifying this. I can't replicate the flicker you're describing, but if it's happening when you scroll up or down fast and you're animating layout properties (e.g. margin), It's very likely this is a browser rendering issue. I've seen it before when using some CSS filters on large areas or animating layout props.

 

When you animate margin the browser has to recalculate and repaint stuff to the screen really fast and sometimes it can struggle to keep up. As Jack said - you'd be better off animating transforms. That way the browser's animating composite layers and it should be nice and snappy.

Unfortunately GreenSock can't change how browsers behave! Hope this helps.