Jump to content
Search Community

Text flickering while scrolling with smooth scroll

Shehzad Asif test
Moderator Tag

Recommended Posts

Hy there

 

The subject may not directly related to gsap but I am curious to know is there any way to solve it. The problem is when you use smooth scroll like the codepen demo, when you start scrolling you will notice that text flickers (like moving up and down when scroll ends). Is there any way to solve this flickering.

 

Regards,

Shehzad Asif 

See the Pen PoZRwPW by ashthornton (@ashthornton) on CodePen

Link to comment
Share on other sites

1 hour ago, Shehzad said:

I am talking about text, border and peaches flickering.

 

Are you talking about when a user scrolls really slowly?

 

On 11/12/2020 at 5:32 AM, Shehzad said:

The subject may not directly related to gsap

 

I agree, to me this can be reproduced with many of these libraries pertaining to certain elements when you scroll really slow. When tiny increments are being calculated you will at times see this perceived jitteriness as the new destination is being reached after you scroll slowly. In that regard it’s not relative to GSAP or ScrollTrigger logic. Because you can see the same thing scrolling slowly without GSAP when using these various other scroll libraries.

 

For instance this basic ASScroll example does not use GSAP, but to me exhibits the same thing when scrolling slowly and calculating tiny increments.

 

See the Pen pobJRQX by ashthornton (@ashthornton) on CodePen

 

  • Like 1
Link to comment
Share on other sites

@akapowl. Thanks for the video. 

@zach. I tried asscroll, locomotive and virtual scroll or even javascript and gsap smooth scroll but all with same issue. There must be a solution to this. I saw some websites with smooth scroll and without flickering even on chromium based browsers(alitwotimes website is a great example). Wondering how they controlled it?

Link to comment
Share on other sites

Hy All,

 

As Zach guided towards applying css property "will-change:transform". And I did the same for locomotive while set the lerp between 0.07-0.08 (you can play with lerp value to your liking mine is 0.08). It will remove the flickering of elements up-to like you will barely feel it. Hope it will be helpful.

 

Point to be noted here is if you use "data-scroll-section" data-attribute for each section on the page then above solution will not work.

This solution works on "locomotive and smooth-scrollbar (1st & 2nd demo on scroller proxy page). It's not working for asscroll but for most smooth scroll libraries it will work as per my testing. Happy smooth scrolling.

 

Regards,

Shehzad Asif

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Hi @Ishav,

 

Please refer to posting on just one thread or creating a new single thread for your issues. You posted basically the same question/issue in four different threads. As we understand that getting an answer as fast as possible is important for GSAP users, we value each and everyone in this forums and we try our best to respond to threads in less than 24 hours and solving issues as soon as we can. Sometimes it may take a few hours but we try to deliver. I encourage you to keep posting your questions as they will be addressed shortly and in the best possible way. I'll go ahead and delete the other posts you created in the other three threads so we can focus only on this one, OK?

 

Now to your questions.

 

The pin: fixed is added in the regular ScrollTrigger configuration object:

// Directly
ScrollTrigger.create({
  pin: true,
  pinType: "fixed",
});

// On a Tween or Timeline
gsap.to("#obj", {
  scrollTrigger: {
    pin: true,
    pinType: "fixed",
  },
});
gsap.timeline({
  scrollTrigger: {
    pin: true,
    pinType: "fixed",
  },
});

The will-change: transform is added on the styles of the elements that are being animated as Zach stated on the other threads where you posted your questions.

 

Finally if you keep having issues, please provide a minimal demo that demonstrates the problems you're having so we can take  a look at it.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

Hi all,

 

We have the Smooth Scroller implemented on a Gatsby site which is doing a wonderful job.

 

I have the same issue of text flickering on scroll in the website https://jovial-fox-cfe5c4.netlify.app/.  

 

In the homepage if you start to scroll, in the section after the landing section you can see the white text in the red background flickers as you scroll. 

 

Below is the code:

 

  gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
  gsap.config({ nullTargetWarn: false }); // clear console log warnings
  useEffect(() => {
      ScrollSmoother.create({
          content: "#smooth-content",
          smooth: 2,
          effects: false,
          normalizeScroll: true,
      });
  }, []);

 

Any advise would be much appreciated.

 

Thanks in advance.

Link to comment
Share on other sites

I'm not seeing any flickering. What browser/OS? Is there any secret to getting it to flicker? Does it help at all if you set ScrollTrigger.normalizeScroll(true)? 

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

I don't have time to dig into it right now (especially with 1000+ lines of CSS), but one problem I see immediately is it looks like you've got CSS transitions applied to a ton of things. You should NEVER apply CSS transitions to something that GSAP is animating. When GSAP tries to set the value, the CSS transitions will prevent it, saying "NOPE! I won't allow that to happen...instead, I'll drag that out over ___ seconds". It's terrible for performance because you're creating conflicts. 

 

I'd recommend removing your CSS transitions and then let us know if the problem persists. 

Link to comment
Share on other sites

Hi Jack, 

 

Thanks for the update. 

 

I have removed all the CSS that are not relevant to this demo. 

 

And also there is no CSS transition applied to the elements at the moment.  The issue is still  up there.

 

  • Chrome version: 106.0.5249.121
  • Edge version: 107.0.1418.26
  • We use Browser Stack for testing other browsers.

Thanks in advance

 

Link to comment
Share on other sites

Sorry, I don't see any flickering whatsoever. It sounds like maybe a rendering and/or CSS issue on certain systems(?) Perhaps you could try applying will-change: transform to the things you see flickering? Sorry, it's just very difficult to troubleshoot blind. Your demo runs fine for me. If you could post a video of the problematic part, that may help too. 

  • Thanks 1
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...