Jump to content
Search Community

Timeline keeps going switching between translate3d and translate

eduardfossas test
Moderator Tag

Recommended Posts

That's by design. translate3d usually performs better, but uses more memory as it has to store a rasterized version of the graphic, kind of like CSS's will-change, so there is no point in keeping the rasterized graphic around in memory at the end of an animation.

 

gsap.to(foo, {
  x: 100,
  force3D: "auto" // default
});

gsap.to(foo, {
  x: 100,
  force3D: true // always uses 3d
});

gsap.to(foo, {
  x: 100,
  force3D: false // never uses 3d
});

 

I don't think there's much use in messing with the default unless you can quantify that it works better with a different setting. There are use cases where changing it works better, but they are rare.

 

  • Like 4
Link to comment
Share on other sites

gsap doesn't know what's in your css. It has to use the computed style to determine the start values, which returns a matrix.

 

If you have x/y components in your css

transform: translate3d(0px, 100px, 0px);

That's going to return a 2D matrix, so gsap will do the switch.

 

If you have a z component

transform: translate3d(0px, 100px, 1px);

That's going to return a 3D matrix, so it's going to keep it 3d.

 

But like I said earlier, if you want it to always be 3d, just set force3D to true.

gsap.to(foo, {
  x: 100,
  force3D: true // always uses 3d
});

 

  • Like 3
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.
×
×
  • Create New...