Jump to content
GreenSock

retropunk

div id names automatically selected by GSAP

Go to solution Solved by Jonathan,

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

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

Link to comment
Share on other sites

  • Solution

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 :)

  • Like 6
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

  • 6 months later...

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.

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

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