TimelineMax choking on tween start

[ottonascarella]

Hi there,

 

First of all, I just want to thank you all at the GSAP team: I love the products you are developing.

Since I have so much love for them, and as I still did not get my member subscription (shamefull, really),

I decided that I should report this here.

 

I created a simple example of what the problem is on the codepen referred above.

 

Basically, each time a new <div> tween kicks in, the previous div animation kinda chokes for milliseconds...

On desktop computers it's hard to see, and sometimes it does not actually happen.

But on my iPad 3 you can see it choking quite consistently. On my phone (Motorola G), it also chokes.

 

Firstly I thought it was because of other things I was doing in the app I am developing, but now I realise that it happens even with this simple example.

 

Any thoughts on it?

 

I tried fiddling with lagSmoothing with no good results....

 

 

Thanks in advance!

 

 

Otto

See the Pen VYpxXE by ottonascarella (@ottonascarella) on CodePen

[Jonathan]

Hello ottonascarella, and Welcome to the GreenSock Forum!

 

Thanks for the example, its a big help!

 

To better help you, i have some questions:

• What browser and browser version are you seeing this on your IPAD and MOTOROLA G ?
• What is the OS and OS version you are seeing this on your IPAD and MOTOROLA G ?
• Also have you tried adding force3D:true or adding a slight rotation:0.001 or z:0.001 to your tweens and see if that helps? (force3D is part of the CSSPlugin)

Any additional info will be appreciated to help debugging the issue, Thanks:)

[GreenSock]

Jonathan's 3D idea is a solid one - here's why: when an element has a 3D transform, it gets "layerized" by the browser (think of it like taking a picture of it and storing those pixels on the GPU), but that process takes a brief moment. By default (as of 1.15.0), GSAP uses force3D:"auto" which will apply a 3D transform during the tween and then at the end of the tween (if there are no 3D properties needed), it will switch back to a 2D one, meaning that element no longer needs to be layerized by the browser. This is generally a very GOOD thing. It ensures that motion is smooth during the animation, and it doesn't continue to eat up GPU memory when it's not animating (if you use up too much GPU memory, it can slow everything down). This is pretty much exactly what browsers do natively under the hood when you use CSS animations. The down side is that it takes a brief moment (usually not even noticeable) to layerize something (shuttle the pixels to the GPU).

 

In your case, you said you noticed a very brief glitch when a new <div> started animating, right? That sounds a lot like the layerizing process in the browser is what's at play here. Keep in mind that's not something that GSAP is actually doing (well, setting the 3D transform does it, but the actual layerizing is managed by the browser). If you set force3D:true (or z:0.001 or any other non-zero 3D property), that means that it'll never go back to 2D even after it's done animating. So you still may see the glitch the very first time it starts animating (when it gets layerized), but every iteration thereafter won't have to be layerized. You could take the slowdown all at once initially (so that it's not noticeable each time something starts animating) by setting immediateRender:true or putting all your tweens into a TimelineLite/Max and jump to the end and back to the beginning again (thus forcing instantiation of the tweens), like timeline.progress(1).progress(0). That'd take extra processing right at that moment, but it gets it out of the way at one time, and everything is layerized that needs to be. Or set your CSS to have a 3D transform to force layerization, or use the new will-change attribute (not supported in all browsers). 

 

Let us know if that helps at all. 

[Jonathan]

I really like that solution you posted above Jack  ..

 

" putting all your tweens into a TimelineLite/Max and jump to the end and back to the beginning again (thus forcing instantiation of the tweens), like timeline.progress(1).progress(0). " ..

 

Very handy

[ottonascarella]

Cheers guys,

 

The promotion to layer concept was something that I had already thought of and experimented with. Tried z:0.1 with no luck, but havent tried force3d:true.

 

I believe the timeline.progress(1).progress(0) won't cut it either, because I kinda do something already on the actual product I am building.

 

Will try it, and report any further thoughts here.

 

 

 

Cheers once again.

[ottonascarella]

No luck with any of the technics....

[GreenSock]

Are you saying that if I look at your codepen link, EVERY time a tween starts (and on every iteration thereafter), I should see a pause/stutter? I can't see it

[Jonathan]

I am not seeing the pause/stutter either.. 

I tested on Windows 7 (64-bit) in Firefox 34 and 35 .. and in Chrome Version 39.0.2171.99 m

Also tested on Motorola Droid Turbo Ballistic -  Android 4.4.4 on Mobile Chrome Version 39.0.2171.93

[Jonathan]

You never let us know what iPad3 and Android OS version and the browser and browser versions you were seeing this behavior on with your devices?

[Carl]

On my iPhone4S I can confirm the stutter on Otto's CodePen using the progress(1).progress(0) trick on the first iteration.

However, this fork appears to work fine: http://codepen.io/GreenSock/full/KwmZVO/

 

Otto, can you confirm that the link above looks ok? 

[Carl]

Just to explain why my solution should work. 

I use the boxMaker function's set() to apply force3D:true

 

function boxMaker() {

var b = document.createElement('div');

  b.className = 'box';

  b.style.backgroundColor = color();

TweenMax.set(b, {x: 105, force3D:true});

return b;

}

 

This basically layerizes each box when it is created and tells GSAP to keep it layerized as a 3D element before, after and during all tweens.

 

Back to Jack's advice, 

If you only put force3D:true on the tweens in the timeline then they would not have been layerized until the tweens start, which is why he also recommended that you force them to get layerized immediately with tl.progress(1).progress(0).play(). The reason Otto's most recent pen with the progress trick didn't work is because force3D:true was not set on each tween like

 

 

boxes.forEach(function(box, i) {

  

var t = TweenMax.to(box, 4, {force3D:true, x: -(window.innerWidth)});

tl.add( t, i * 2 );

 

});

 

 

tl.progress(1).progress(0).play()

[ottonascarella]

Yeah guys,

 

It seems that forcing 3D before adding the tweens to the timeline did the trick!

 

Problem is that the software I am building uses images instead of coloured boxes...so I have to free GPU memory somehow: we are looking at hi-res pictures moving around...so forcing 3D its kinda a bad idea.

 

Apple needs to sort out this "promotion of layer" issue: it should not break code like it does IMHO.

 

Thanks for the help!

Much appreciated, really.

 

 

ps: iPad3 is known for having worse graphics performance than iPad2...they give you a retina screen, (8 times more pixels) but only twice as much GPU power.....oh Apple...thanks.... 

[GreenSock]

Yeah, I hear you - I wish the layer promotion process was more efficient on Apple devices, although I'm not an engineer and have no idea how technically difficult that is. 

 

Keep in mind that when you're done animating an image (for good), you can always set force3D back to false or "auto" so that it frees up resources. 

 

Good luck with your project. 

[ottonascarella]

sure...problem is, if I "depromote" an image, when I need to animate it again, I'll need to promote it (as it happens naturally)...as the other image will be "on stage", the animation will suffer from that promotion anyway.