Jump to content
Search Community

ScrollSmoother glitchy when any element uses mix-blend-mode

Blennd test
Moderator Tag

Recommended Posts

Hi there. I'm trying to use scrollSmoother for smooth scrolling and various effects. However, i've run into a strange issue. In the example linked, I am using mix-blend-mode to create a "knockout" text effect over a video background. Then I'm pinning the section beneath with scrolltrigger. As you can see, the pinned section is choppy and glitchy looking on scroll. 

 

Removing mix-blend-mode on the text section seems to immediately solve this. Just that one line. I don't understand how the two are related, but I'd like to achieve the effect I'm going for with mix blend mode and still have smooth pins using scroll trigger. Any ideas here? 

See the Pen KKRxQEz by Caj (@Caj) on CodePen

Link to comment
Share on other sites

1 hour ago, Blennd said:

the pinned section is choppy and glitchy looking on scroll. 

I can't seem to recreate that. I've checked in 3 browsers. Can you explain how to reproduce the problem? And what exactly is choppy/glitchy - the pinned section (after the video part is already off-screen)? 

 

Beware that filters and blend modes are notoriously VERY difficult for the browser to render. It has nothing to do with GSAP/ScrollTrigger - it's a rendering challenge with the browser. Plus there isn't great browser support yet, so I personally would be reluctant to use it. 

Link to comment
Share on other sites

26 minutes ago, GreenSock said:

I can't seem to recreate that. I've checked in 3 browsers. Can you explain how to reproduce the problem? And what exactly is choppy/glitchy - the pinned section (after the video part is already off-screen)? 

 

Beware that filters and blend modes are notoriously VERY difficult for the browser to render. It has nothing to do with GSAP/ScrollTrigger - it's a rendering challenge with the browser. Plus there isn't great browser support yet, so I personally would be reluctant to use it. 

It's relatively subtle, but the issue I'm experiencing is specific to the text in the pinned section (after video is off screen and during the length of the pin with scrollTrigger). I tested in both latest chrome and safari. when blend mode is being used, the text in the pinned section appears to be much choppier when the pinned section is being scrolled (especially when smoothScroller is "smoothing," like the smooth after the scroll is finished but the plugin is smoothing the end-- not sure how best to phrase that but hopefully that makes sense). when smoothScroll is deactivated, the pinned text seems to pin or "stick" better without the chops (these chops im referring to feel like endless tiny microadjustments on the Y axis or position adjustments during scroll, it doesn't feel smooth). 

 

When commenting out the blend mode, the pinned section feels perfectly smooth on scroll, or "sticks" perfectly on scroll. I recognize blend mode is challenging but it seems strange that this behavior is especially prominent with smoothScroll enabled vs disabled.

 

Again, hope I articulated the issue I'm seeing well enough. It is a bit subtle but noticeable especially when viewed on larger screens in codepen. 

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...