Jump to content
Search Community

SplitText Flicker in all Browser

Umberto test
Moderator Tag

Recommended Posts

Hi, I have created some splittext animations to insert on my page. I noticed that on the various browsers, when I scroll down the text begins to flicker, especially if I use the type: "lines, words" and type: "lines, words, chars" class.

 

Probably, I made some mistakes in compiling the code.

 

Below I bring you my example

 

Thanks for your help

See the Pen gOvMPJK by umberto (@umberto) on CodePen

Link to comment
Share on other sites

11 minutes ago, PointC said:

I see some flicker in most browsers as the text comes to a stop. You can try the usual tricks - slight rotation or maybe will-change.

 

I'd also recommend using ScrollSmoother rather than Locomotive.

https://greensock.com/scrollsmoother/

 

I have already tried to use ScrollSmoother  and it is much more efficient and smoother than Locomotivescroll, but testing it I have a problem with the body on an animation (https://tympanus.net/codrops/2019/10/21/how-to- create-motion-hover-effects-with-image-distortions-using-three-js /), but for that I open another post.

 

I tried adding will-change: transform

 

.js-reveal-text-words-up,
.js-reveal-text-chars-up,
.js-reveal-text-heading-chars-up,
.js-reveal-text-chars-left,
.js-reveal-text-rotate,
.js-text-chars-l {
  will-change: transform
}

but it does not work.

thanks

 

Link to comment
Share on other sites

I'm not seeing flicker (might be your video card) but setting will-change: transform on things and maybe pointer-events: none (to let the browser ignore pointer interactions on those) will give you the best change for good performance. Other than that, it very well may be that you're just pushing the browser's graphics rendering too hard with all those characters individually animating. 🤷‍♂️

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