Jump to content
Search Community

Flickering with Smooth Scroller, ScrollTrigger and translateZ

Anya test
Moderator Tag

Go to solution Solved by Anya,

Recommended Posts

Hi guys, 

I'm having a weird flickering issue when using Smooth Scroller in conjunction with Scroll Trigger and translating elements in Z axis with multiple layers. (seen in Chrome 109 in full screen view). Disabling SmoothScroller makes it much better, but I love Smooth Scroller and would love to keep it enabled.

Maybe you might have some input on how I could tackle it.  To my understanding it's chrome being buggy with multiple translateZ.. but.. that's the browser most people use..

Any ideas are very appreciated!

 

 

Thank you for your hard work.

 

 

 

 

See the Pen xxJRmjd by slyka85 (@slyka85) on CodePen

Link to comment
Share on other sites

Hi,

 

I'm not seeing any flickering in both Firefox and Chrome on Ubuntu 20 and 22. What specific browser and OS is giving you this trouble?

 

What I could suggest is to add the will change property to the figure element:

#section1 figure.block1{
  width: 100%;
  height: 100%;
  will-change: transform;
}

Another option would be to animate the images instead of the figure tag, I don't know if that could help but just typing things that I'd try.

 

Add the will change property to the smooth content container:

#smooth-content {
  will-change: transform;
}

Make the scroll amount for the images animation shorter, maybe a faster animation could translate into less or no flickering.

 

Finally if nothing works try the next release of ScrollTrigger:

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Thanks Rodrigo for your input. 

The flickering occurs in Chrome 109.5414.119 both on Mac Ventura 13.1 and Monterey.

2 of my coworkers see the same flickering in Chrome on their Macs,  but the other 2 don't have the issue on the same browser version and OS....

I tried a lot of tweaks, with backface visibility, rotation 0.01, force3D etc...  no success

 

See the video below for visibility.

https://www.veed.io/view/afa1b20a-9b98-4c2c-b08b-60714335f7de?panel=share&sharingWidget=true

 

Link to comment
Share on other sites

  • Solution

Looks like the flickering issue goes away if I add

"transform-style: preserve-3d"

to all parents that have perspective set up, and adding

overflow: hidden
backface-visibility: hidden

to elements that are being transformed.

🥳

  • Like 4
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...