migration to gsap3 -> _gsTransform

[jbonlinea]

hi there

 

I could read in the documentation on how to migrathe that _gsTransform is depreciated in gsap3, ok. It further suggest to edit our old code like such

// old
element._gsTransform.x

// new
gsap.getProperty(element, "x")

That's sounds doable, but in some case the code not use this syntax, for instance in some pen referenced by experienced user in this post where the property is not defined, node being an object of the DOM see below :

 

transform: node._gsTransform,  
x: node.offsetLeft,
y: node.offsetTop,
node

 

How are we suppose to migrate this ?

 

I did several try without success

 

Thank's

 

[ZachSaucier]

2 hours ago, jbonlinea said:

transform: node._gsTransform,  
x: node.offsetLeft,
y: node.offsetTop,
node

 

How are we suppose to migrate this ?

Code that has transform.someProperty you'd do gsap.getProperty(node, someProperty) instead. Is there a specific issue that you're running into? If so, a minimal demo would be helpful in us helping you.

[jbonlinea]

Hi

 

ok, basically I took this

See the Pen eJGrPN by osublake (@osublake) on CodePen

, and try to update it in this

See the Pen yLOqNvY by jbonlinea (@jbonlinea) on CodePen

. I think I'm good everywhere but on line 21

 

It would be great if you coud have a look !

 

Regards

[GreenSock]

@jbonlinea Do you still need help with this given our recent discussion at: 

? 

 

There are several problems with the last codepen you provided, but I don't want to waste my time fixing it all if you're going to use the solution from the other thread

[jbonlinea]

Hi

 

the answes is yes and no

 

No, I don't, basically since i don't mind this pen anymore since I go with the other one, much simplier and at least as efficient.

 

Yes, because many pens still use the older syntax, and I stil havent figures out how to change this specific peice of code into the new one, so the issue will probably rise again soon or later !

transform: node._gsTransform,  
x: node.offsetLeft,
y: node.offsetTop,
node

[ZachSaucier]

17 minutes ago, jbonlinea said:

Yes, because many pens still use the older syntax, and I stil havent figures out how to change this specific peice of code into the new one, so the issue will probably rise again soon or later !

I show how to do that in my post above:

 

[jbonlinea]

yes I've seen, and and I've also read the doc, really, really seriously, but I still don't get what to change to migrate this piece of code

But we may forget it for now, and I may come back with an other pen that need migration if I bump into issue again

 

transform: node._gsTransform,  
x: node.offsetLeft,
y: node.offsetTop,
node

[ZachSaucier]

7 minutes ago, jbonlinea said:

I still don't get what to change to migrate this piece of code

I told you how to replace the _gsTransform part using node as a reference. That's all you need. Again, I'm confused as to what we're not providing. Perhaps if you made a full, working bit of code that we could help you convert to GSAP 3 that'd make things easier for you to understand.

[GreenSock]

A little background that might help the pieces fall into place...

 

In the OLD GSAP (v2 and earlier), a _gsTransform object was added to any elements that had transforms animated/set via GSAP so that it could store the component pieces of the transform independently, like "x", "y", "scaleX", "scaleY", "rotation", etc. In other words, it was an object like: 

element._gsTransform = {
  x: 0,
  y: 0,
  scaleX: 1,
  scaleY: 1,
  rotation: 0,
  skewX: 0,
  ...
};

At runtime, GSAP would pull from those values to combine them into a matrix() or matrix3d(). 

 

BUT that model didn't allow for units, so you could never do something like animate to "20em" or "15vw". In GSAP 3, we moved to a very different model that allows for units and we wanted to streamline things to allow people to "get" values anytime...that's where gsap.getProperty() comes in. 

 

So if you have code that depends on accessing a _gsTransform object directly, that should be rewritten to just get whatever values you need directly via gsap.getProperty(). It'll even do unit conversion for you!

 

Like Zach said...

// the old way
let x = element._gsTransform.x;

// the new way
let x = gsap.getProperty(element, "x");

Does that clear things up?