Laggy first-time animation

[jcbfshr]

Hey Everyone,

 

I'm working on a site that has some fairly light scroll-triggered animations(basic fade in and fade up). Everything works as expected - animations are triggered at the right time, everything looks good - except that the first time the animation is triggered, there is a slight lag/delay. It's fairly noticeable and I've tried what I can to smooth it out the first time(force3D, setting different props, etc). Everything is smooth and performant the second time the animation runs, but the first is the most important. Seems like something gets cached and allows the animation to run smoother after first time or something.

 

Any ideas? Here's a test link. Scroll down to the 'work' section.

 

http://sanghanco.surge.sh/

[GreenSock]

I haven't had time to look at your code/page but I will say that there's an initial cost when a tween renders for the first time because it has to read the current properties, figure out the amount of change that's necessary, and record some things internally. There's no getting around that. BUT you can certainly pre-pay that cost if you'd like. I'd definitely recommend trying it here. The concept is to just force your tweens to render - you can jump them to their end state and then immediately return them. For example...

var tl = new TimelineLite();
tl.to(....).to(....).to(....); //build your timeline

//now jump to the end and back again so that everything gets initialized/recorded internally right now, like when your page loads:
tl.progress(1).progress(0);

Just a thought. I'm not sure how you've set everything up or how easy that'd be. 

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

One solution could be to scrub all the animations to their ends and then to the start again, after the preloading is completed. Then once you did that remove the preloading. That could force the browser at least to do the necessary calculations. Since rendering doesn't seem to be a big problem, as you report that after the first run everything is smoother, perhaps removing the calculations could improve performance. I don't know if you have everything in a single timeline or you have more than one, but at the end this comes to quickly take the animations to their end.

var tl = new TimelineLite({paused:true});

tl
  // add all the instances to the timeline

//finally scrub the timeline's playhead to it's end

TweenLite.to(tl, 0.5, {progress:1, onComplete:function(){
  // once the tween is completed take the timeline back to 0
  tl.pause(0);
}});

If you have more than one instance you could try exportRoot to do the same.

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/exportRoot/

 

Another possibility you could explore is lagSmoothing in order to see if that could help:

 

http://greensock.com/gsap-1-12-0

 

PS: The boss was waayy faster than me 

[jcbfshr]

Thanks for the responses, guys! From other posts on the forum, you seem to always get around to writing something!

 

The insight on tween startup costs is helpful. I'll do some reconfiguring and run them upon initialization and go from there.

 

Thanks again!

[Jonathan]

Jack I'm really loving that tl.progress(1).progress(0); tip! Thanks!