Jump Start question

[retropunk]

I was just going through the Jump Start demo and I created a demo of my own based off the first slide 

I came across something that I don't understand.

If I place an image into the body of an html page like:

 

<img src="img/logo.png" id="logo">

and then do this in JS, the tween doesn't work

 

var logo = document.getElementById("logo");
TweenLite.to( logo, 1, {left:"600px"});

but if I do this, it works

var logo = document.getElementById("logo");
TweenLite.from( logo, 1, {css:{alpha:0}, delay:1});

now if I set the div like this, similar to the Jump Start demo

<div id="logo"></div>

and set the background image in CSS, this works

var logo = document.getElementById("logo");
TweenLite.to( logo, 1, {left:"600px"});

So I guess my question is...Is placing an image into a div via CSS a requirement for Tweening certain properties?

 

Thanks!

- Patrick

 

[GreenSock]

Absolutely not - you don't have to wrap things in divs for tweens to work. I suspect the problem was simply that you didn't set your <img> element's position to "absolute" in your css. That's necessary in order for "top" and "left" to work (that has nothing to do with GSAP - it's just how css works). Annoying, I know. 

 

Also, please make sure you're using the latest version of the GreenSock files. Early versions required wrapping your css-related stuff in a css:{} object, but ever since 1.8.0 that hasn't been necessary (although it's perfectly fine to do and is slightly faster performance-wise). 

 

Does that clear things up for you? If you need any more help, don't hesitate to ask here. 

[retropunk]

oh I see...my bad. I had a strong feeling I was missing something.

 

Totally makes sense now! Thanks a million as always!