Line Animation Stutter Issue at the easeOut

[Alex J. 8 Likes (Newbie)]

Hey there beautiful people on the Internet,

 

I have another issue that I am facing while trying to achieve the very popular split text line reveal animation. The issue that I am facing is, I am noticing a stutter at the easeOut of the animation, it seems lagging. 

 

I have attached a CodePen link which demonstrates the issue. Also, I have made the animation duration slow to make it more noticeable. It is there even with easeInOut and less duration.

 

I am having issue on Google Chrome, My Graphics card is 1650 Super so I don't think it's a GPU issue. 

 

What am I doing wrong here? I would like it to be as smooth as possible. 

 

Thank You

See the Pen poreWeg by alexjain (@alexjain) on CodePen

[OSUblake 18,533 Likes (Superhero)]

Hi Alex,

 

When animating text, browsers will typically snap the text so that it looks crisp and readable. You can try adding will-change to your CSS, but I'm not sure that is the stuttering you are referring to.

 

.line {
  will-change: transform;
}

 

[Alex J. 8 Likes (Newbie)]

 

14 minutes ago, OSUblake said:

Hi Alex,

 

When animating text, browsers will typically snap the text so that it looks crisp and readable. You can try adding will-change to your CSS, but I'm not sure that is the stuttering you are referring to.

 

.line {
  will-change: transform;
}

 

 

You are awesome, I did not even knew will change is a CSS Propertyl today. Thank you so much!

[Alex J. 8 Likes (Newbie)]

Just one more question @OSUblake, Is there any way to start the next animations once the one before it is completed? 

Many Thanks

[OSUblake 18,533 Likes (Superhero)]

For a staggered effect, it might be better to use batching instead of creating a ScrollTrigger for every element.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

[GreenSock 18,876 Likes (Superhero)]

40 minutes ago, OSUblake said:

browsers will typically snap the text so that it looks crisp and readable. 

Another strategy I've seen work is to add a very slight rotation or skewX or skewY to the elements because that forces the browser to realize it can't snap to the pixel grid perfectly, thus it suspends pixel-snapping. 

[GreenSock 18,876 Likes (Superhero)]

19 minutes ago, OSUblake said:

For a staggered effect, it might be better to use batching instead of creating a ScrollTrigger for every element.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

Just for the record, though, .batch() does create a ScrollTrigger for each element (internally). The main benefit of .batch() is that it groups the callbacks so that you can dynamically apply staggered animations (or whatever). 

[Alex J. 8 Likes (Newbie)]

Just noticed this happens with the Image as well (the stuttering at the End)

 

Here's a codepen link to the same:

See the Pen YzxZegg by alexjain (@alexjain) on CodePen

P.S. - I forked this pen from Original Author (cameronknight) and made changes (duration and ease options) to demonstrate the issue. 

 

Any workaround for this?

 

Thank You 

[GreenSock 18,876 Likes (Superhero)]

That's just a browser rendering thing where the browser is applying pixel-snapping (totally unrelated to GSAP). You can apply a slight skewX or skewY or rotation to force the browser to stop pixel-snapping:

See the Pen yLoMKZq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I updated your syntax to the more modern v3 too. 

 

Does that clear things up? 

[Alex J. 8 Likes (Newbie)]

22 minutes ago, GreenSock said:

That's just a browser rendering thing where the browser is applying pixel-snapping (totally unrelated to GSAP). You can apply a slight skewX or skewY or rotation to force the browser to stop pixel-snapping:

 

 

 

I updated your syntax to the more modern v3 too. 

 

Does that clear things up? 

 

I am loving GSAP and this community. You guys are awesome!
Thank You so much