Optimising off-screen animations

[munky]

Hello,

 

 I have a sort of scrolling list that I'm working on, as you use the mousewheel the items scroll up/down the screen. Potentially, there could be 100 or more items in the list but only 10 items are visible on-screen.

 

 What is the best way to optimise the off-screen items so that the scrolling is as smooth as possible? Do I add a time of 0 to the animation, do I turn off visibility for the item or is it best to write some code to only tween if it's visible on the viewport? When not visible, the items still need to move even if I don't tween them into position.

 

 Thanks.

 

 

[Carl]

Its hard to guess what the best way to implement a particular solution is, but I would suggest setting visibility:hidden.

[Jonathan]

Hello, I believe along with Carl's great advice.. also setting pointer-events: none might help too

 

then when onscreen set pointer-events: auto

 

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

 

[munky]

Thanks very much for the suggestions.

 

Sorry for being vague, I guess what I'm trying to ask is if there any situations where GSAP has some internal optimisation and would not tween an item. For example, if I remember correctly my old days from using Flash, if a movieclip has an alpha of 0 then it is still rendered, but if visibility is set to false then it is NOT rendered. 

 

In my project, I'm looping through each of the items and animating them like this:

 

TweenLite.to($(this), scrollspeed/1000, {top:np + "px", force3D:true});

 

So, for any items not visible within the viewport, I don't really want to waste time tweening them. Would it be best to simply set the visibility to hidden, turn off pointer-events and set scrollspeed to 0 for off-screen items or is there a better way to do this?

[Jonathan]

You could possible do this..

 

use set() method to set the initial CSS values with GSAP .. using set() is like using a zero duration tween. .. and then when you animate you can tween like so:

// set initial CSS values
TweenLite.set($(this),  {top:np + "px", visibility:"hidden", pointer-events:"none"});

// then when ready to animate 
TweenLite.to($(this), scrollspeed/1000, {visibility:"visible", pointer-events:"auto", top:np + "px"});

:

Just a quick note.. force3D:true won't really do anything unless you use CSS Transforms. So in your case you can opt to use y (translateY) instead of top for a smoother animation. force3D is part of the CSSPlugin ..

 

The below is taken from CSSPlugin Docs:

 

force3D

when you set force3D:true, it forces GSAP to apply a 3D value to the element's transform, meaning matrix3d() instead of matrix(), or translate3d()instead of translate() which typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In other words, setting force3D:true usually boosts performance, making movement more smooth. However, if you exceed the GPU's memory limit, performance will degrade, so it's not wise to force3D:true everything all the time. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details. In our experience, though, it helps performance more often than not. The default value is false.

 

So the above could also be written like:

// set initial CSS values
TweenLite.set($(this),  {y:np + "px", visibility:"hidden", pointer-events:"none", force3D:true});

// then when ready to animate 
TweenLite.to($(this), scrollspeed/1000, {visibility:"visible", pointer-events:"auto", y:np + "px", force3D:true});

:

Notice i replaced top with y .. which animates on the y-axis which will give you a better animation than animating CSS top property. Since y would be animated on a sub-pixel level (99.9999px) .. whereas top only animates on a pixel level (99px). So y would be smoother

 

If you could provide a codepen example we can help you better by testing your code in a live editable environment.

 

Here is a nice video tut by GreenSock on How to create a codepen demo example.

 

Resources:

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

http://css-tricks.com/myth-busting-css-animations-vs-javascript/

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

 

Hope this helps

[munky]

This is great, thanks very much!