Jump to content
Search Community

Problem with debugging in chrome

Svein-Tore test
Moderator Tag

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 hope this problem can be easy to explain. The problem is not GSAP but how it works.

 

I have a bullet, and when I hit spacebar the following tween is run (yes, this is a kind of spaceinvaders game):

 

             TweenMax.to("#bullet",1,{top:-20})

 

The bullet is at top=500px, so this bullet will of course leave the screen, no problem,works fine. BUT. When I go to Chrome debugger and write the

following in console:

 

document.getElementById("bullet").style.top  i get "", That is, an empty string????

 

Can someone please explain? BTW: when it comes to the animatiom everything works fine, just want to get a grip of what is happening.

Link to comment
Share on other sites

You can access those values using _gsTransform.

 

When you tween any elements, GSAP attaches _gsTransform to that element's DOM object. So you can access all the current values by using _gsTransform. For example,

 

var elem = document.getElementById('box');

TweenMax.to(elem, 1, {xPercent: 100, 
                      
                      onComplete: function(){
                        console.log(elem._gsTransform.xPercent);
						
                      }
                     
                     });

 

Will return current xPercent for that element. It can be very useful to access values of elements so you can calculate anything you want.

 

If you are using jQuery,

 

var $elem = document.getElementById('box');

TweenMax.to($elem, 1, {xPercent: 100, onComplete: 
                       function(){
                         console.log($elem[0]._gsTransform.xPercent);
                       }


                      });
// Trying to access _gsTransform will return undefined because you are accessing them before GSAP attaches object to DOM
console.log($elem[0]._gsTransform.xPercent);

 

You will have to use index of that element to access DOM object.

 

If you are using Draggable,

 

Draggable.create(elem,{
onDrag: function(){
	console.log(this.target._gsTransform.xPercent);
}
});

 

So basically you have to access DOM object to further access these values. You can investigate further by checking objects from developer tools and get idea about what values GSAP attaches to DOM object of each element it ever tweens/sets.

 

NOTE: You can access these values whenever you want, except if you set 'to/from/fromTo'  tween and try to access these values right away on next line, you will get undefined because you will be trying to access these values before GSAP could attach the object to DOM.

 

 

See the Pen xXYLWj?editors=1111 by Sahil89 (@Sahil89) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Hi Sahil!

Thanks for your answer.  I have tested your codepen.  If I in the console write:

 

document.getElementById('one')._gsTransform.x

 

I got 100

 

If I write 

document.getElementById('one')._gsTransform.left

 

I got undefined, but this div must definitely have a left position?

Link to comment
Share on other sites

Well using x is same as left, it is just that key for left value in _gsTransform object is set to x. So if you want to access left value for element you can use x for it.

 

Following is recent thread where you might get more insight on _gsTransform.

 

 

  • Like 1
Link to comment
Share on other sites

OK, thanks again!

 

BTW  I have played around a bit, think I got it now. If i write 

TweenMax.to("#bullet", 1, {top: -20});

Everything works Ok, but I'm not able to get the value in debugger.

 

If I write:

TweenMax.to(document.getElementById("bullet"), 1, {top: -20});

I am able to teh values in the debugger.  Which mean it is "not the same" what I put in as an object in TweenMax?  These to are in a way different, am I right?

Link to comment
Share on other sites

Ya I was just writing further on that. Basically _gsTransform stores values of transformation. So basically you should stick to using x and y instead of using left or top. @Carl Can further explain why using left or top doesn't attach _gsTransform values.

 

Quote

Which mean it is "not the same" what I put in as an object in TweenMax?  These to are in a way different, am I right?

 

Ya from what I gather from

See the Pen WZMZbp by Sahil89 (@Sahil89) on CodePen

they are different but you will be better using x and y instead of top or left. It is basically doing same thing plus typing few letters less.

Link to comment
Share on other sites

It's tough to diagnose without a codepen or something, but I'll mention a few things:

  1. _gsTransform is only for transform-related values (x, y, rotation, scaleX, scaleY, xPercent, yPercent, etc.) NOT for top/left or any other CSS values. 
  2. I wonder if you're running the console on a different document. For example, if you have a codepen open in editor mode, it's running the results inside fo an iframe, so if you try running document.getElementById("bullet").style.top on that top/parent window, it won't find the one that's inside your codepen. 
  3. Make sure you don't have multiple elements with "bullet" as their id. :)

If you're still having trouble, we'd be happy to look at a codepen demo (or jsfiddle or whatever). 

  • Like 2
Link to comment
Share on other sites

Well, as I mentioned earlyer, if I use 

TweenMax.to("#bullet", 1, {top: -20});

Everything works Ok, but I'm not able to get the value in debugger (document.getElementById("bullet").style.left is empty).

 

If I write:

TweenMax.to(document.getElementById("bullet"), 1, {top: -20});

I am able to the values in the debugger (document.getElementById("bullet").style.left hasa value).  

 

Which mean it is "not the same" what I put in as an object in TweenMax?  These to are in a way different, am I right?

Link to comment
Share on other sites

Sorry, it's just REALLY hard to tell you what's going on without seeing it. Any particular reason you don't want to post something we can look at? That'd sure help.

 

In your first example, you're animating the "top" but you're checking the "left" property in the debugger. Once I can see the problem in context, I'm pretty confident I'll be able to give you a much more solid answer. 

  • Like 1
Link to comment
Share on other sites

OK Jack!

 

Go to Sahils pen above.  Run it once, then go to console and type 

document.getElementById("one").style.left

 

I got "" as answer.  Shouldn't it be 100px?

 

If I type 

document.getElementById("one")._gsTransform.x

I got 100

 

document.getElementById("one").style.left

Link to comment
Share on other sites

Hello @Svein-Tore

 

From what i read in this thread you said that left was undefined.  Yes i was thinking the same thing Jack brought up about using top in your tween but your checking for the left value. We can better hep you if you show us some live code for context, Since there is no way we can understand what your problem your having without seeing the problem in context. Just create a super simple example so we can better help you ;)

 

 

Thanks! :)

 

 

Link to comment
Share on other sites

Hm, I think you're misunderstanding...

 

When you animate "x", that affects the CSS transform property, like "transform: translateX(...)". So no, it should NOT be setting the "left" property. That's something totally different. The codepen you mentioned is working exactly as I'd expect. style.left should indeed return "". 

 

Here's a fork of that codepen that uses "left": 

See the Pen VMQQPw?editors=0011 by GreenSock (@GreenSock) on CodePen

 

Seems to be working as expected. Again, if you're still having trouble it'd be super amazingly awesome if you could pretty please provide a reduced test case in codepen or jsfiddle or even a live site I guess. :)

  • Like 3
Link to comment
Share on other sites

@Svein-Tore What is being outputted is correct, an empty string. When you console document.getElementById("one").style.left, it is an empty string because left isn't defined on that element. The left property is a CSS position offset. The tween property x doesn't equal the left property. The x property in GSAP is equivalent to translateX() for a CSS transforms.

 

If you look in the codepen's HTML, CSS, and JS panel.. you will see no left property defined anywhere. So by not defining left in the CSS or via GSAP, the elements style.left DOM property will be an empty string, meaning not defined in the elements DOM node. So it is outputting like it should :)

  • Like 2
Link to comment
Share on other sites

No worries.. here are some references:

 

  • x = translateX()
  • y = translateY()
  • z = translateZ()
  • rotation = rotate()
  • rotationX = rotateX()
  • rotationY = rotateY()
  • rotationZ = rotateZ()    (same as rotation)
  • scale = scale()
  • scaleX = scaleX()
  • scaleY =  scaleY()
  • scaleZ = scaleZ()
  • skewX = skewX()
  • skewY = skewY()

 

CSSPlugin Docs:

 

2D transforms: 

https://greensock.com/docs/Plugins/CSSPlugin#2DTransforms

 

3D transforms:

https://greensock.com/docs/Plugins/CSSPlugin#3DTransforms

 

Happy Tweening :)

 

 

  • Like 3
  • Thanks 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.
×
×
  • Create New...