force3D not working

[Jonny]

Hello,

 

I am tweening a still image, on my really nice mac it looks fine but viewing it on IE11 on a PC, the image stutters and wobbles when tweening.

 

I have added a window.onload function() {CSSPlugin.force3D = true;};

i have tried CSSPLUGIN.force3D = true

CSSPlugin.force3D:true etc etc.......

 

 

Nothing seems to work (yes, i am including the CSSPLUGIN.min.js file), am i doing it wrong or at the wrong time?

 

Still the image seems to shudder along during the tween.

 

thanks for your help, also, i thought i could explain without codepen, but sorry i went against recommendation!

 

Jonny  

[Shaun Gorneau]

I will need a URL to really see what is going on.

[Rodrigo]

Hi Jonny,

 

As far as I know with this code:

CSSPLUGIN.force3D = true;

You're just adding a force3D property to the CSSPlugin object .

 

The force 3D feature it's automatic now (since version 1.15.0) when you pass any transform property in the config object. For example this code will trigger the force3D feature when the animation starts and remove it once it ends:

TweenLite.to(myElem, 1, {x:300, y:300});

The idea is to animate the objects using either a translate3D or a full 3D matrix to animate the element and once the animation is completed go back to a normal 2D matrix (of course if no 3D property was animated). The idea is to add a layer to the GPU but then remove it to avoid clogging smaller GPUs like the ones on middle/low end devices.

 

For non-transform properties (top, left, padding, margin, etc.) you need to set up the GPU layer manually in the config object of an instance and not in a general way via the CSS Plugin, like this:

TweenLite.to(myElement, 1, {left:300, force3D:true});

Or you can set it to the target element in a general way:

// add the element to a GPU layer
TweenLite.set(myElement, {force3D:true});

// animate the object
TweenLite.to(myElement, 1, {left:300});

// then  later on your code remove it
TweenLite.set(myElement, {force3D:false});

[Carl]

We can't really give you any concrete advice without seeing a simple demo.