div id names automatically selected by GSAP

[retropunk]

This is something I found out by accident.

If you have a div id named "logo"

You can target it with GSAP without defining a var or using the quotes '#logo' in the Tween

 

This works and I was surprised because I didn't define a var:

TweenMax.to(logo, 1, {scale:0.5});

Depending on what I am doing I will define the var

var logo = getElementById('logo');
TweenMax.to(logo, 1, {scale:0.5});

or just

TweenMax.to('#logo', 1, {scale:0.5});

Is this a happy accident or is it dangerous? Not sure why it would be dangerous but I wanted to ask just in case

With my luck this was probably blogged about and I am behind the curve again

 

Thanks

- P

See the Pen JXbLow by SnapToPixels (@SnapToPixels) on CodePen

[Jonathan]

Hello retropunk,

 

It is not to be trusted, so your better off just defining your id with a variable like you did above, or just pass as a string to GSAP:

var logo = document.getElementById('logo');
TweenMax.to(logo, 1, {scale:0.5});

// or just pass as a string to GSAP
TweenMax.to("#logo", 1, {scale:0.5});

Basically anytime you have an ID in the DOM the browser will store that as a global namespace in the window object. So technically you could just use the id name without targeting the element with that id and defining as a variable. But i would advise against that since the ID namespace sometimes shares the same namespace as the name attribute. And its not really reliable to trust on the global namespace for id's in the DOM.

 

So i would just declare and define your variable so you can target the element with that ID. This way you can know for sure that the variable isn't shared and has a conflict with another variable name in the DOM. It is bad practice to trust named ids in the window object without declaring var in javascript

 

Please read the following regarding ID's with named access on the window object, which is being standardized in HTML5:

 

http://w3c.github.io/html/browsers.html#named-access-on-the-window-object

 

Happy Tweening

[retropunk]

Thanks Jonathan, I suspected it was dangerous. We have some developers that play fast and loose with GSAP and this helps me. That W3C link is perfect!

 

Thanks for the quick response

- Patrick

[TRFC]

I have a similar type of problem with the target name for a Tween. I bring the target name in via a variable and then put this variable into the tween -- it does on seem to work.

 

I have a variable Jname which has the string value 'mary'  ( i.e. Jname='mary' ).   mary is the id value of a div    ---   <div id='mary'>   ....... </div>

 

I then find that    TweenMax.to(Jname,3,{x:100})               does not work.

I find that            TweenMax.to(eval(Jname),3,{x:100})      does work.

 

How do I avoid using the eval function for the target variable.

[Jonathan]

Hello TRFC,

 

Do you have a limited codepen example so we can test your code live to better help you?

 

 

Also it is always best  to start a new topic since this topic is already answered.

 

Thanks!

[joe_midi]

I have a similar type of problem with the target name for a Tween. I bring the target name in via a variable and then put this variable into the tween -- it does on seem to work.

 

I have a variable Jname which has the string value 'mary'  ( i.e. Jname='mary' ).   mary is the id value of a div    ---   <div id='mary'>   ....... </div>

 

I then find that    TweenMax.to(Jname,3,{x:100})               does not work.

I find that            TweenMax.to(eval(Jname),3,{x:100})      does work.

 

How do I avoid using the eval function for the target variable.

 

 

But your JName variable doesn't match up to a DOM Element, it's just a string.

var JName = 'mary';
TweenMax.to(JName, 3, { x: 100 });

// Is the same as
TweenMax.to('mary', 3, { x: 100 });

You would need to do something like this:

var JName2 = '#mary';
TweenMax.to(JName2, 3, { x: 100 });

// or

var JName3 = 'mary';
TweenMax.to('#' + JName3, 3, { x: 100 });

To illustrate this: 

See the Pen RGyrWr by joemidi (@joemidi) on CodePen

[TRFC]

Thank you for the explanation and difference between a string and a DOM element.  For completeness, the code
​TweenMax.to (mary,3,{x:100})  also works.    In this case, the mary without enclosing ' ' is recognised as a DOM element.

 

Thank you so much for your help with my basic understanding.