ScrollTrigger page height changing with scrubbing causes scrollbar lag in chrome

[Racind]

I have an animation on these cards that is changing the height of some spacers above these cards to get a neat scrubbing affect. The animation works great and scrolling down with the scroll wheel is just fine, but if you click on the scrollbar and drag it down, you'll notice that when it hits the animated area, it slows down significantly. I know that this is caused because the height of the entire page is decreasing which does need to happen. Scrollable height changes = scrollbar speed change. My question is how do I stop or at least reduce this from happening. It almost feels like scroll jacking which I hate. 

 

I also noticed that this does not happen on safari. I haven't check other browsers besides chrome (sidekick) and safari.

See the Pen MYgXxvO by k-ord-dev (@k-ord-dev) on CodePen.

[mvaneijgen]

If you can help it I would never animate the height of something, this will always cause issues. There are a few properties in CSS that cause browser repaints which you should avoid at all costs, height is one of them. You're much better of animating the elements on the y-axis, this does mean you have to also create a separate animation for the background, but this makes it so that everything will feels smoother. 

 

Hope it helps and happy tweening! 

 

See the Pen NPKBKdm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Racind]

@mvaneijgen Thanks for your reply! This solution is definitely an option but it does have one issue that I'm not a fan of. I don't want the individual elements to overlap the contents below them on the page as that is part of the animation I'm going for. I would prefer to find some solution for this without removing that part of the animation if possible.

[Rodrigo]

Hi,

 

Just use overflow: hidden on the parent element:

.steps {
  --spacer-height: 0px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  background: gray;
  padding: 32px 0;
  overflow: hidden;
}

See the Pen yyBqgXX by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Racind]

@Rodrigo I appreciate the response. I didn't explain very well what I meant with the overlap being an issue. Here is my original codepen slightly adjusted to show how the animation looks with another element below it. How the animating element and the element below it interact with each other when the height is adjusted is part of the intended animation.

See the Pen MYgXxvO by k-ord-dev (@k-ord-dev) on CodePen.

[mvaneijgen]

To me it feels like you now have a few options to choose from. Use your original effect with all the issues it has, use a transform like I suggested, you can fix the overlap like @Rodrigo suggested or just calculate some extra space you have there when the animation is finished. 

 

Now it is up to you to choose the solution that best fits your project. Changing the height of something will always cause issues, but if you like the effect better, that is for you to figure out. I would go with the transform option and add some extra blank space until the next section, so that things don't overlap and the gap is just a little bit bigger than you would ideally want it, but that seems like an ok trade off to me. 

 

Hope it helps and happy tweening! 

[Racind]

@mvaneijgen Okay, so in relation to my original question and post, there is no way to fix the scrollbar lag while keeping my original animation. I appreciate the responses from both of y'all and the attempt to find a solution! For now, I'll probably just leave it alone. I like the animation more than I think that the scrollbar issue will be relevant since a majority of users are using the scroll wheel or touch screen devices.