Have to use css on a div?

[DeLDesign]

Forgive the newbie question but I'm having trouble beginning to learn this. I have a test page to play around with tweens and the basic TweenLite.to isn't working on a div, but IS on an image. I added an img, id="photo", above the three divs on super_basic_syntax.html. I'm trying to not include jQuery and use the most basic TweenLite code possible.

 

 function init() {

var p1 = document.getElementById("photo");

var d1 = document.getElementById("div1"),
	d2 = document.getElementById("div2"),
	d3 = document.getElementById("div3");

	//this works:
	TweenLite.to(p1, 1.5, {width:100, height:100});
	//this doesn't. Have to use css on a div?
	TweenLite.to(d1, 1.5, {width:10, height:400});	
	//this works too. Referencing the photo id directly:
	TweenLite.to(photo, 2, {css:{rotation:30, scaleX:0.8}, delay:2});
 }

 

Do I have to use the css plugin methods when manipulating divs?

[GreenSock]

Yes, since <div> tags don't have a "width" or "height" property, it won't do you any good to have TweenLite tween them

 

Think about it this way: for the most part, you can only tween "real" properties of your object, so try to think about how you'd accomplish things without TweenLite first. Like how would you control a <div>'s width or height (not tweening - just setting directly)? Same for an <img>. That will give you a very good clue as to how you'll need to tween it.

 

In the case of a <div>, you've got to use CSS to get precise control of the div, so that means you'll need to use the CSSPlugin for that. But an <img> tag has actual "width" and "height" properties, so you could tween those directly OR you could use css for an image's width/height (both work).

 

Make sense?

[DeLDesign]

Yes. Thank you. Best to just stick with the css methods in most cases. It looks like you could only use a non-css tweening of width or height on the following elements: img, iframe, table, col, object. Can you think of others?

[GreenSock]

Yes. Thank you. Best to just stick with the css methods in most cases. It looks like you could only use a non-css tweening of width or height on the following elements: img, iframe, table, col, object. Can you think of others?

Not off the top of my head, no (but I haven't committed all the tags to memory)