Jump to content
Search Community

Line Animation Stutter Issue at the easeOut

Alex J. test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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;
}

 

  • Thanks 1
Link to comment
Share on other sites

 

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! :)

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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! :D
Thank You so much

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