Jump to content
GreenSock

Jonny

force3D not working

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 :) 

Link to comment
Share on other sites

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});
  • Like 5
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×