Animate dynamically created objects

[Paulo Ricca]

Hi,

I'm trying to animate an arbitrary number of objects created dynamically, but somehow it's not working, the object is cerated and added to the div but it doesn't move. Can anybody help be here?

 

The code I have:

var newImg = document.createElement("img");
newImg.src = "http://www.browsealoud.com/images/browsealoud/plus/uk/Chrome.jpg";
//animationContainer is a div (I've checked this object is correctly referenced)
this.animationContainer.appendChild(newImg);
tl.fromTo(newImg, 5, {left:"20", ease:Linear.easeNone}, {left:"80", ease:Linear.easeNone}, 0);

Thank you!

[Carl]

Hi and welcome to the GreenSock forums.

 

Could be a css issue, but its tough to know without seeing all the code. You can't animate the left or top position of an object unless in css you specify a position in CSS, most commonly: 

 

position:absolute;

or

position:relative;

 

This is strictly a css rule, nothing to do with GSAP. If giving your element position doesn't work feel free to create a CodePen demo:

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

This would be a great one to fork: http://codepen.io/GreenSock/pen/dgmia

[Paulo Ricca]

Ah that's it, thank you!

 

I've added this to the container and it works now:

.container *{
	position: absolute;
}

[Carl]

Excellent. Happy Tweening!