Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kittichai

tell TweenMax to uses translate3D instead of translateX/Y?

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. 

Share this post


Link to post
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)

Share this post


Link to post
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}});

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Is this still true?

To use Translate3D I have to do something to Z?

 

Cheers.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Thx. And thx for telling me what time in video it shows the dev tools environment w/ GSAP!!!!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×