_gsTransform not working React js

[Srinivasan]

I am implementing calculator Dial in my local. I have got some issues, I resolved it from the forum answers. I am getting below issues white running that in my local.

 

error - components/Charts.js

TypeError : Cannot read properties of undefined(reading '_gsTransform')

function dragUpdate(){

var val = ($drag[0]._gsTrasnform.rotation);

 

See the Pen gWZjjj by nsei (@nsei) on CodePen

[mvaneijgen]

Hi @Srinivasan welcome to the forum! 

 

Any particular reason why you are using gsap 1.19.1? We're currently at 3.11.5! I don't know what it would take to get this up to date, maybe this helps but this is a guide from GSAP 2 to 3 not from version 1 🙃

 

 

I would get the properties of the drag on the drag instance as described in the docs and then you can get .endRotation from there. https://greensock.com/docs/v3/Plugins/Draggable

 

 

Object - The scope to be used for all of the callbacks (onDrag, onDragEnd, onDragStart, etc). The scope is what this refers to inside any of the callbacks. The older callback-specific scope properties are deprecated but still work.

 

See the Pen jOeOmMR?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

As for React are you using the gsap.context()? Check out this post for more info. Hope it helps and happy tweening! 

 

[Rodrigo]

Hi,

 

The reason _gsTransform is undefined is because the object no longer exists. On top of that we strongly discourage users against using any property or method that starts with an underscore (_someProperty or _someMethod()) because those are not from the public API, they are for internal use only and they could change from one version to another without any notice, that's why those are not documented.

 

@mvaneijgen's advice is right on the money, Draggable has a bunch of properties that allow you to track the values being it affects. On top of that if you need to get some particular value of an object tweened by GSAP you can use the getProperty method:

https://greensock.com/docs/v3/GSAP/gsap.getProperty()

 

Hopefully this helps.

Happy Tweening!

[Srinivasan]

Hi @mvaneijgen,

Thanks for the solution proposed. I have updated the new version in my react.

 

Most of the errors got resolved. Now I got new error.

 

"element.text(value)" 

TypeError : Cannot read properties of undefined (reading 'text');

 

I have included TextPlugin from dist as well. Still I am getting this issue.

 

Kindly help me on this.....

[Rodrigo]

Hi,

 

Your codepen example from the first post is working as expected and not throwing any errors, is using very old versions of GSAP and Draggable and also is not a React project.

 

Please fork this starter template in order to show a minimal demo (remember to keep it simple, there is no need to recreate your entire project just the issue you're having):

https://stackblitz.com/edit/gsap-react-basic-f48716

 

Happy Tweening!