TweenMax.ticker event for scrolling animation

[LaszloOveges]

Hello!

 

It's my first time useing the tick event provided by greensock, and i am having trouble to figure it out what i am missing in my code, because there are signs that something is not right.

 

Well the concept is that there is a horizontal scrolling area (with iscroll.js), and during scrolling the upcomming element should scale up / animate to it's full size.

 

I use the TweenMax.ticker.addEventListener('tick', myfunction) on line 312 to call the function which detects which box should be animated. On every tick event the selected box(es) properties get updated with TweenMax.set.

 

The problem is that the performance is not right, there is a flickering during scrolling and in IE11 it is even worse (very jumpy).

 

I have put together a fiddle to see it in action: https://jsfiddle.net/LaszloOveges/yykc0356/

 

Anyone has an idea what is wrong with this code? I would really appreciate any comment.

 

Cheers,

 

Laszlo

 

See the Pen by LaszloOveges (@LaszloOveges) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

I'm not able to dissect all 300+ lines of it but there are some performance red flags mainly regarding how you are creating a bunch of set()s repeatedly in new timelines for every update.

 

Whenever a tween is created and run GSAP needs to ask the browser to find that element in the DOM and also read the existing values of the properties you are animating. A tween needs to record start and end values so that it can efficiently be played and reversed multiple times without needing to search the DOM again. 

 

Doing a set() is the same as a to() or from() tween except that the duration is 0 seconds. A set() still needs to search the DOM for the target and also READ and WRITE the starting and ending values  immediately. A tween created via set() is a very odd bird in that since it has no duration it runs immediately and completes as soon as it starts but it also needs to remember start and end values so that it can be placed in a timeline and reversed. 

 

Also consider that the purpose of a timeline is for sequencing. On each update you are creating a new timeline with 4 .set() calls that all fire at the same time. A TimelineLite object inherently has a bunch of features for the advanced scheduling of tweens. If you need 4 set()s to run at once it would be more efficient to just use 4 TweenMax.set()s.  Creating a timeline really doesn't suck up a lot of resources but in this usage it seems wasteful or unnecessary.

 

My point is that it would be better to use vanilla JS to if you only need to instantly change a bunch of css style values. There is no need for any sequencing (TimelineLite) or any need to create a bunch of tweens (created by set()) that require all the reading and writing. In normal, 1-off, instances sets are perfectly fine to use, but if you are re-creating a bunch of them and trying to keep up with 60fps it could be an issue.

 

I would recommend you study the demo below from @OSUblake

 

See the Pen BZNGyd?editors=0010 by osublake (@osublake) on CodePen

 

When the app loads it creates 1 timeline for each dot that scales and changes the color of each dot (bullet). Based on the horizontal scroll position he determines which animations  need to move their progress forwards or backwards. As you scroll horizontally you will see very fluid animation of the dots.

 

It is much easier on the browser to tell multiple animations to update then to repeatedly do all that searching, reading and writing caused by the set()s.

 

 

 

 

 

[LaszloOveges]

Hi Carl,

 

Thank you very much for your detailed answer!

 

It is very usefull to get more insights rather than just get a solution. I am gonna apply your points to my code to benefit the performance.

 

Also thanks for the pen your pointed out, I really like it's methods which I will implement into my code.

 

Because I have to update continuously the boxes on every scroll movement I was thinking to use  timelines for each box and update their progress to the required position without the duration parameter.

 

By the way, am I correct that the greensock ticker function on the tick event does handle the throtteling, so there is no overlap in calling the passed function over and over?

 

Cheers,

 

Laszlo