Jump to content
Search Community

tell TweenMax to uses translate3D instead of translateX/Y?

kittichai test
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

Is there anyway to specifically tell TweenMax to uses CSS translate3D instead of translateX/Y to move object?

 

I found that translate3D performance on various browser perform smoother than translateX/Y. but if I just use:

      TweenMax.to(object, 1,
        {
          css:{
            x: '1024px',
          }
        }
      );

The code above will use translateX, which is much slower than when I use CSS translate3D

      @-webkit-keyframes slideIn {
        0% { -webkit-transform: translate3D(1024px, 0px, 0px); }
        100% { -webkit-transform: translate3D(0px, 0px, 0px); }
      }

The platform that give the obvious difference is iOS.

 

Also, can you just isolate the code for each demo in demo page? It's hard to dig down into the code on each page. 

Link to comment
Share on other sites

There aren't any flags built into the engine to force matrix3d, but you can apply a very slight z value in your tween like so:

 

//uses transform matrix
TweenLite.to("#top", 0.5, {x:200});
//uses transform matrix3D
TweenLite.to("#bottom", 0.5, {x:200, z:0.01});

See the Pen 9c565c10e00344890c5ba9f34b40334c by GreenSock (@GreenSock) on CodePen

 

run that demo and inspect each element to see the inline style that is applied

<div id="top" style="-webkit-transform: matrix(1, 0, 0, 1, 200, 0);"></div>
<div id="bottom" style="-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0.01, 1);"></div>

You can look in this collection to see some of the demos that we have on the CSS3 page:

http://codepen.io/collection/wDliL

http://codepen.io/collection/ifybJ (jump start)

Link to comment
Share on other sites

Thanks Carl. Is there a better way? I concern that z:0.01 will affect the performance of the engine. 

 

Also, is it:

//uses transform matrix3D
TweenLite.to("#bottom", 0.5, {x:200, z:0.01});

or

//uses transform matrix3D
TweenLite.to("#bottom", 0.5, {css:{x:200, z:0.01}});
Link to comment
Share on other sites

One more thing, I have test it and inspect element, it uses matrix3d as you said. But, I found out that if I specify the frame rate using

 

TweenMax.ticker.fps(30);

 

The animation will not feel smooth, regardless of the fps (I have tried from 20, 25, 30, 40, 60. All not smooth) Do I misunderstand something? I thought, back in the Flash day, fixing fps properly will make it looks consistent.

Link to comment
Share on other sites

you don't need to wrap your vars in a css object unless you are animating many elements and want to eek out a little more performance. 

 

Setting the z simply is a way to specify that it should be a 3D translation and thus its more likely to be handled by the GPU.

 

----

 

I have no problems at all with the default framerate of 60fps. The results are super smooth. 

 

30 rarely looked good in Flash, and results are similar in JS. 

 

If you are animating lots of elements we have found that left/top is better than x/y.

See the speed test here which allows you to compare the 2 methods:

http://www.greensock.com/js/speed.html

 

Browsers certainly vary, but Chrome in particular creates a new rendering layer for each transformed element which tends to become a bottleneck.

 

ios Safari is highly optimized for CSS3 animations, and when those animations use 3D or opacity is really the only time you will notice a performance gain over using JavaScript, but of course you will be sacrficing tons of features and controls.

 

We've had many super smooth results with ios so I'm really not sure what you are seeing, but it is possible in some cases using CSS3 animations will performa a little nicer.

  • Like 1
Link to comment
Share on other sites

Making z slightly varied from 0 can actually help your object render more smoothly as it kicks in antialiasing in a certain way, but if you really want to keep that as 0, you can set the transformPerspective instead because that'll kick in the 3D rendering mode too. Also beware that I've read that some browsers are becoming smarter about people "tricking" them into 3D rendering, so they're beginning to ignore things like translate3d(0,0,0). I have no idea if that will happen consistently in browsers in the future, but my point is that if you set z to 0.01 or something, you wouldn't have to worry about the browsers beginning to ignore your "trick". 

 

Like Carl said, be careful about forcing 3D rendering - it can be great when used in moderation but if you've got tons of objects animating simultaneously, you'll probably find that performance degrades (this has nothing to do with GSAP - it's a video memory buffer thing). 

  • Like 1
Link to comment
Share on other sites

  • 3 years later...

Hi Vic,

 

Welcome to the forums. Quite a bit has changed since 2013. You do not need to do any tricks to get the benefits of hardware acceleration.

Please read the section on force3D here: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Checkout the video in the Getting Started guide. http://greensock.com/get-started-js (4:56) it shows how you can use dev tools to see how GSAP applies maxtrix3d for 2d transforms.

  • Like 2
Link to comment
Share on other sites

  • 3 years later...
18 minutes ago, boilzzz said:

Hello gsap 3.0 no longer uses matrix3d and uses tranlate3d, in this regard, I have covered some moments of animations( Is it possible to return the use of matrix3d?

 

Why do you need matrix3d? It uses translate3d because you can use units now.

 

  • Like 2
Link to comment
Share on other sites

37 minutes ago, OSUblake said:

 

Why do you need matrix3d? It uses translate3d because you can use units now.

 

Did preloader, applied animation to svg, which continued css animation, and in gasp 1.19 when applying matrix3d everything was fine. And when you upgrade to 3.0 stopped working correctly . The problem has already been solved, wrapped svg in div and everything came back to normal.

  • Like 2
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...