Jump to content

Paulo Ricca

Animate dynamically created objects

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


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)
tl.fromTo(newImg, 5, {left:"20", ease:Linear.easeNone}, {left:"80", ease:Linear.easeNone}, 0);

Thank you!

Link to comment
Share on other sites

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: 






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:



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

Link to comment
Share on other sites

Ah that's it, thank you!


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

.container *{
	position: absolute;
Link to comment
Share on other sites

Excellent. Happy Tweening!

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.