TimelineMax: Something goes wrong by calculating tweens duration

[Roussakov]

Hi guys, I've struggled with giving an appropriate title so here is extended description of the problem.

 

My use case is following,

app that I working on is collecting a mousemoves data per browser session. The data structure is super simple, it holds x and y of the mouse position and it timestamp (when event has been fired). Next, once my fronted app fetches mousemoves data by session id, the data is being normalized in terms of the timestamp property which end up as following structure:

 

[{x:1,y:1, time:0}, {x:12,y:15, time:0.34}, {x:15,y:13, time:0.923}]

 

the time property reflects the time interval between events

 

since we are talking about user browser session and collecting mousemoves events , u can imagine that this list of mousemoves can be really huge. The goal is to playback user experience using greensock platform.

 

So here is a nice and working example by using only TweenLite

See the Pen vWRPgr by roussakov (@roussakov) on CodePen

 

That great but not enough, I need more control of a playback, I need to stop and play and play with time scales which leads me to next great candidate TimelineMax.

The problem is when i'm trying to do the same thing with TimelineMax tweening goes wrong.

 

see how laggy this animation

See the Pen aVYMww by roussakov (@roussakov) on CodePen

 

What would you suggest? Thanks in advance!

 

 

 

[GreenSock]

It's actually not lagging at all - it's just that you've scheduled the tweens incorrectly in the TimelinMax so that there's a bunch of time inbetween each one. Remember, by default, to() tweens get inserted at the END of the timeline...but you also added a "delay" to each one, thus those added together! Basically, it puts it at the end PLUS the delay that you defined. Here's the fixed version: 

See the Pen 326aa0dfcf19642c697afc4734968fe9 by GreenSock (@GreenSock) on CodePen

 

Better? Just use the delay as the position parameter and you're done.

[Roussakov]

Thanks so much for quick response!