Demo lagSmoothing

[Sirena]

Hi! I can't find the first lagSmoothing demo from this video. I know it's kinda outdated but I still want to play with it in order to understand lagSmoothing better. 😅

 

[Toso]

hi @Sirena  where did you find this video i have never seen it before even when searching in docs 🫣 but it's from GSAP 1.12 I don't think it's recommended to use the same technique now (maybe I am wrong ) but now GSAP has powerful tools like easing,  staggering, and timelines 

 

so the most important question here is, what are you trying to build? 🙏

 

edit : 

I think i was wrong i  found some recent posts about ppl asking about it so this means it's still a thing I guess  🫡

 

[PointC]

Yeah - I'd be curious about what you're building as well. Maybe a demo?

 

You can find more info about lagSmoothing under the gsap.Ticker() property.

 

https://gsap.com/docs/v3/GSAP/gsap.ticker()#gsaptickerlagsmoothing

 

Happy tweening.

[Sirena]

@Toso @PointC to be honest I just want to understand all performance related features in gsap. And I got stuck in lagsmoothing, I've read about it but I want to play with demo to see visual difference. The second demo is still available in the latest docs, so I hoped the first one is also available somewhere.

I tried to implement it by myself but the box is jumping in each one of my lagSmoothing configurations. I expect the box to jump only with lagSmoothing off

 

See the Pen ZEPgWxp by Vsevolod-Kochnev (@Vsevolod-Kochnev) on CodePen

[Toso]

got it,

great catch  I tried to ask Copliot about a use case and he was like 🤔 🤔 🤔(so you trying to lag your project)  😂 , I will add it to my to-never-do list to check it someday, good luck with it 🙏

[GreenSock]

That's because your fabricated "lag" doesn't exceed the threshold. lagSmoothing(500, 33) basically means "only apply lagSmoothing when a single tick takes MORE than 500ms". And lagSmoothing(1000, 20) would need the tick to take more than 1000ms to kick in lagSmoothing. 

 

So you can increase the numIterationsyou're passing to your startLag() method. Maybe add a 0 to the end. It also depends on the speed of the device you're running the test on. Some machines will execute that loop faster than others.