Duration = 0

[mimeartist]

I'm trying to speed up an animation; basically I have 20 very large images (2000 pixels wide) on a large scrollable website (left to right) if you click on one then that scales to the screen, in conjunction with a scrollTo to allow for the centring etc ...

 

I'm checking which ones are in view of the window and then animating the ones that will be seen by setting their duration to 1, and the ones that just need to move to there new position and not be seen are set to 0

 

Is this a good way of doing it? Or does setting the speed to 0 still use valuable CPU? Also does the plug0ni offer any of this optimisation already and am I just getting in it's way

[Carl]

I wouldn't worry about tweens with 0 duration causing any performance problems.

 

Although it gives the same result, you might be interested in the set() method with creates a tween with no duration

TweenLite.set(element, {x:-1000});

same as

TweenLite.to(element, 0, {x:-1000});

[jamiejefferson]

Also to clarify, what you're doing is a great solution. GSAP doesn't check to see if things are within the viewport when you ask it to tween since it would be a huge performance drain (especially as you increase the number of tweens) when the majority of use cases probably don't require this sort of optimisation.

 

The custom detection you've added is the best way to handle it, since you can optimise that for your specific use-case (e.g. if you find that image 4 is on screen, you won't really need to check offsets for image 5, 6, 7, 8, etc as well, since the chance that someone has a monitor that large is essentially 0).

[mimeartist]

Thanks for the feedback... It's basically the update for http://madeinratio.com I'm trying to optimise... some interesting scaling things going on... and the new version of Safari that's just come out is struggling a little so giving it all a bit of a speed boost

 

James