Best way to select DOM object using TweenLite / GSAP?
I am using TweenLite to create banner ads. Everything works fine for me, however I am a little confused about item selection or at least the best practice for item selection using TweenLite.
I first used this:
var logo = document.getElementById("logo");
to select an element and then animate with:
TweenLite.to(logo, .45, {transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut});
However, I found that the animation still works without #logo being declared as a variable.
My question is, which of the following are the best options to use?
-
var logo = document.getElementById("logo"); TweenLite.to(logo, .45, {transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut});
// Declare variable and reference -
TweenLite.to(logo, .45, {transform:"1,1", right:"19px"});
// Don't declare #logo as a variable, or use # to denote a logo as an identifier. Not sure why this works. -
TweenLite.to("#logo", .45, {transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut});
// ID of the link in the script without creating or referencing a variable
Or is there another option that is better than I don't know, other than using an additional js library? Is browser support the same for all of these?
I am loading in the following libraries from GSAP: css plugin lightness TweenLite
source to share
It is not clear what you mean by "best way". Do you mean the friendly way? Or a user-friendly way? When programming in general, be as direct as possible. Don't create unnecessary variables (you avoid memory leaks and performance gets better).
If you do NOT want to use the logo object for a single animation only, use a variable as storage:
var logo = document.getElementById("logo");
TweenLite.to(logo, .45, {transform:"1,1", right:"19px"});
The Greensock selector is elegant, but it must process a string to select an object:
TweenLite.to("#logo", .45, {transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut});
If you only want to use the logo object for that single animation and be performance friendly, be straightforward:
TweenLite.to(document.getElementById("logo"), .45, {transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut});
source to share