Jump to content
GreenSock

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

TweenLite.set(target, {z:0.1}) override scale

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

Hi,

 

I want to force the use of gpu composing

 

My target is something like this

<ellipse cx="50" cy="50" rx="50" ry="50" fill="#9c9e9f" style="-webkit-transform: scale(0.2, 0.2);"></ellipse>

So I force the z property

TweenLite.set(tween.target, {z:0.1});

And the result is not really expected

<ellipse cx="50" cy="50" rx="50" ry="50" fill="#9c9e9f" style="-webkit-transform: translate3d(0px, 0px, 0.1px);"></ellipse>

The scale is removed. Any better way to doing this? Or maybe it's a bug?

 

Thanks

Link to comment
Share on other sites

Could be a bug, or something TweenLite can't do, Have you tried being explicit with the scale in your set and/or using TweenMax?

 

eg.

TweenLite.set(tween.target, { css: { scaleX:.2, scaleY:.2, z:.1 } } );
  • Like 1
Link to comment
Share on other sites

This isn't a bug in GSAP - it's a bug in the browser and it only seems to relate to SVG elements. For example, try this:

 

HTML: 

<svg>
	<ellipse id="circle" cx="50" cy="50" rx="50" ry="50" fill="#9c9e9f" style="left:50px; -webkit-transform: scale(0.2, 0.2);"></ellipse>
</svg>

JavaScript:

var ellipse = document.getElementById("ellipse"),
console.log( document.defaultView.getComputedStyle(ellipse, null).getPropertyValue("-webkit-transform") );

You'll see that it logs "none" instead of the matrix. Basically, the browser is incorrectly reporting that there are no transforms applied even though there are. So there's no way (that I know of) to correctly grab the current values in this particular case. The browser is supposed to return either a matrix() or a matrix3d(), and CSSPlugin's internal parsing algorithm depends on that.

 

And again, this only seems to happen with SVG elements. I wish I had an easy answer, but there are some browser bugs that are virtually impossible to work around. :( If anyone has a good idea, let me know. And it's not enough to check the style itself because not only will that probably not be a matrix (which means more code would be necessary for accurate parsing), but also it would only work when the style is applied inline rather than via a class or something. 

 

Rob's suggestion should work. I know it's a bit of a pain, but I think it's your best bet. Or just apply the styles directly via TweenLite.set() initially instead of using regular css. 

  • Like 1
Link to comment
Share on other sites

Or just apply the styles directly via TweenLite.set() initially instead of using regular css. 

 

 

Ok I'll try that, thank you.

 

Another question, can we have a real tweenlite property for forcing the gpu on an element ?

Because, once enabled (with z tricks), I can't disabling them with z = 0.

Because matrix to matrix3d works but not the reverse.

 

Sounds possible ?

 

Thank you for your great work, Jack. I made ​​the transition from AS3 to Javascript with you :-)

Link to comment
Share on other sites

How about a force3D:true flag that you can set in a tween? Like:

TweenLite.to(element, 1, {rotation:120, force3D:true});

I have attached a preview of CSSPlugin 1.10.2 with that feature in it - let me know if it works well for you or if you have any better ideas. 

CSSPlugin_1.10.2_preview.zip

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

Jack,

 

The force3D var forces GPU to kick in only in the particular animation being called or it becomes a permanent set for all the animations in the app, like the default perspective of the CSSPlugin?, by all the animations I mean the ones already created and the ones yet to be.

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hi Rodrigo,

 

force3D is applied to individual tweens. It isn't a global setting.

 

-carl

  • Like 2
Link to comment
Share on other sites

Thanks Carl.

 

Rodrigo.

Link to comment
Share on other sites

And just to clarify, when you set force3D:true, it's object-specific and it does get remembered by the engine so you don't need to keep setting force3D:true on every tween. Think of it like a toggle switch. You could turn it off again later if you want, using force3D:false. But once you use it on a particular target, you're good-to-go. 

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