Jump to content
Search Community

Scale up from zero

swampthang test
Moderator Tag

Go to solution Solved by swampthang,

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

I have an app that allows you to save a file and reopen it. Everything works great except for when a scale to 0 has been applied to something and the user saves the file with an SVG in that state. When the file is opened the scale tween doesn't connect to the SVG when the scale settings in matrix3d start out at 0.


The codepen is as simple as it gets and replicates the issue. There's only one line:

TweenMax.fromTo('#gp-1',1,{scale: 0}, {scale: 1},0);

It works if the style attribute starts out as:

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 392, 315, 0, 1)

...but not if it starts out as:

matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 392, 315, 0, 1)

I'm sure I'm struggling with this because of my lack of understanding something. Any guidance from a GSAP/SVG sage would be greatly appreciated.

See the Pen gwJbyr?editors=1010 by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Yeah in Firefox it displays but doe snot animate.


Have you tried to just use matrix() instead of matrix3d() ?


the reason being is that the SVG 1.1 spec dictates that CSS 3D transforms are not supported on SVG elements, at least not until SVG 2.0. So you should try and use matrix() instead. Since browsers that follow the spec like Firefox and IE will not even allow CSS 3D transforms on SVG elements.


I bet if you use matrix() instead of matrix3d() .. it should work as expected in both Firefox and Chrome


So this way it is only doing a 2D transform matrix() instead of 3D transform matrix3d() :)

Link to comment
Share on other sites

That was a good guess but here's a fork where I set force3d: false in the original tween and then added that to the Tween that tries to run scale up.


See the Pen WGBAox?editors=1010 by swampthang (@swampthang) on CodePen


Still doing the same thing. I also tried to reset the values manually on-load but when I do that it breaks the connection to the Tween obj.

Link to comment
Share on other sites

Yea, that's what I noticed initially, that it works if I changed the matrix values to...


matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 392, 315, 0, 1)


Removing them altogether isn't a good solution though because they need to be positioned on the stage in the correct place. One of the things that's weird is that if I change the values manually in inspector it loses connection to the tween obj or possibly, it never connects at all with starting matrix values of scale==0.


I changed my forked pen to use a paused timeline and a play button like this:

var tl = new TimelineMax({paused: true});
tl.fromTo('#gp-1',1,{scale: 0}, {scale: 1, force3d: false}, 0);

$('button').on("click", function(){

If you look at the debug version view, you'll see that as soon as the page loads, data-svg-origin gets overwritten. 

It starts off at "127 127" and becomes "NaN NaN" when the page loads. 


So, with the NaN's in the data-svg-origin attr, when you click the play button you get this error:

invalid force3d tween value: false


If I change the matrix from (0, 0, 0, 0, 256, 256) to (1, 0, 0, 1, 256, 256) everything works just fine. Is that expected? Is GSAP just not able to run a scale tween on an SVG that starts with a matrix setting of scale==0?

Link to comment
Share on other sites

Why is GSAP code setting data-svg-origin to "NaN NaN"? Here's another fork where I check first for scale at 0 and use TweenMax to reset scale to 1. I'm trying to debug this but in Chrome inspector I literally don't see the element at all until after the timeline/tween is set up. At that point I'm seeing the NaN thing.


See the Pen JRqXkY?editors=1010 by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Oh, by the way, the new version always uses the "transform" attribute for SVG transforms by default instead of applying it via CSS because it's more consistent across browsers. Previously, we defaulted to CSS only in Chrome because technically it gave more options (3D, even though the SVG spec doesn't support it but Chrome broke the rules). That's why you were seeing it as matrix3d() in CSS. It's especially important in your case to consistently have it applied to the attribute instead because you're saving and pulling the data back in, which could be in a different browser. 


You could always set CSSPlugin.useSVGTransformAttr = true to force it. But in the new version, you wouldn't need to. 

  • Like 2
Link to comment
Share on other sites

Ahh, ok. So, all I'm really doing in this particular animation is offering the user a zoom in or zoom out. So, it's either fromTo {scale: 0}, {scale: 1} or visa versa. 


Where it works perfectly in the codepen, it doesn't in the app because I'm using Electron which is built on nodejs. I still have to include the plugin files separately so it's still seeing version 1.19.0 of the CSSPlugin. That results in the same division by zero error. 


I reverted back to the 1.19.0 TweenMax file and set CSSPlugin.useSVGTransformAttr = true;


When I run the animation it does save it out as a transform attribute but if I try loading the file, I get the following error...


Error: <g> attribute transform: Expected number, "matrix(0,0,0,0,NaN,NaN)".


That's coming from line 1674 in CSSPlugin.js but tracing the call stack it originates from setting up a Draggable instance on that gp element when the file loads. So, I guess I have to wait and get the whole enchilada for 1.19.1 to get this working. How close are you to having it ready? I noticed in the downloads it's still 1.19.0.

Link to comment
Share on other sites

Found a temporary workaround. When saving the file, I'm saving the _gsTransform obj in the file. Then, when I load it back in - prior to running the Draggable setup - I'm using this to check for the dreaded multiplication by zero...


gp._gsTransform.x = isNaN(gp._gsTransform.x) ? 0 : gp._gsTransform.x;
gp._gsTransform.y = isNaN(gp._gsTransform.y) ? 0 : gp._gsTransform.y;
gp._gsTransform.xOffset = isNaN(gp._gsTransform.xOffset) ? SVG.gpTransform.x : gp._gsTransform.xOffset;
gp._gsTransform.yOffset = isNaN(gp._gsTransform.yOffset) ? SVG.gpTransform.y : gp._gsTransform.yOffset;
Seems to have fixed it for now. Looking forward to the new version!
Link to comment
Share on other sites

  • Solution

Hmmm, seems to have fixed the scale issue but it's not successfully setting Draggable now. Actually it was a conflict with how I have the transforms set up and CSSPlugin.useSVGTransformAttr = true. So I was able to fix the zoom from zero thing using the code above and remove CSSPlugin.useSVGTransformAttr = true.

Link to comment
Share on other sites

Are you saying you don't have a way of dropping that preview of TweenMax into your local setup? Any reason you're loading CSSPlugin in addition to TweenMax (that's redundant since CSSPlugin is included inside TweenMax)? Do you need me to send you an updated version of CSSPlugin alone for your tests? Or did I misunderstand - were you saying you think there's a problem with the new TweenMax that breaks Draggable? 

Link to comment
Share on other sites

It's because I have to install GSAP using npm install and, for whatever reason, it doesn't automatically pull in all the plugins. There's a thread from back in June (not sure where) that talks about that. At this point everything is working. I can wait until you release the new version for npm.

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