Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Design by The Rues LLC

Force3D Confusion

Go to solution Solved by Jonathan,

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 trying to figure out why this codepen (included), even though I have told it "force3D: true" in both the set() and to() methods, is not using "matrix3d" for the transform. I can't seem to figure out what the difference is between my codepen and the GreenSock codepen here: 

See the Pen kingu by GreenSock (@GreenSock) on CodePen

.

 

Can anyone point me to the difference? Maybe I just keep missing something simple...

 

Thanks,
Frank

See the Pen NRYVYO by frankrue (@frankrue) on CodePen

Link to comment
Share on other sites

Hi Frank,

 

Thanks for the demo.

 

Even though your demo is only doing 2D transforms (scaleX, scaleY) there is a translate3d() function being applied: http://prntscr.com/cs5ce8 which will offload that layer to the GPU. 

 

If you were to animate a 3D rotation property, like rotationX then a matrix3d() would be applied.

Try adding rotationX:180 to your tween to see the difference.

 

 

My assumption is that using translate3d takes less work than the matrix3d so matrix3d is only used when necessary.

 

Does that help clear things up?

  • Like 2
Link to comment
Share on other sites

Carl -

 

Thanks for the quick response. I am working on an iPad-only project, and, for some reason, the matrix transforms are infinitely faster (even when just used for scale) than the direct use of scale(). I'm not sure why this is, or if this is new to the iOS family, or what, but I wanted to know if there is a way—even on the simplest of animations—to force the use of the matrix3d() css transform instead. I guess I had assumed force3D offered this, but, in the strictest sense, it is, technically using "3d".

 

Thoughts?

Frank

Link to comment
Share on other sites

  • Solution

To force a matrix3d() you have to either add a slight rotation:0.01 and / or z:0.01 to your tween :)

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.
×