Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Umberto

SplitText Flicker in all Browser

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

Heya!

 

You are animating a lot of text which can be hard work for the browser - But saying that, I'm not seeing any flickering here, chrome, desktop. Any steps to recreate?

 

 

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

Thanks for the reply.
I sent a new codpen because the previous one was not activated Locomotivescroll.

Try now

 

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

 

So can the flicker be due to my iMac?
If I insert too many text animations on a page, can it cause this problem?

 

Thanks

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

Will try to add fewer animations.

Thanks for your help and for your availability.

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