[Animations not working on images loaded via api]

Yes this worked! Thank you so much!

[Animations not working on images loaded via api]

Hello,

 

Thank you for replying. I removed the brackets and going the simple (photo1, photo2 ...) approach. I'm not sure why, but these id's are still not animating. I also tried animating just the common class (.photo), but that didnt work either. 

 

I forked your codepen thing and added in the exact code I am trying to use. Can you please take a look at it : 

See the Pen LGpjr by tarunfzr (@tarunfzr) on CodePen

[Animations not working on images loaded via api]

I'm trying to animate some images I am getting via instagram and appending to a <ul> item. But it seems like I cannot animate any of the dom elements that are being created during the api call. I have a simple <ul> like this :

<ul class="instagram">

</ul>

And then the js is like this :

$.ajax({
	  type: "GET",
	  dataType: "jsonp",
	  url: "https://api.instagram.com/v1/users/1/media/recent/?access_token=MY_ACCESS_TOKEN",
	  success: function(data) {
          //load 20 images into <li> elements
	    for (var i = 0; i < 20; i++) {
          $(".instagram").append("<li class ='photo' id='photo[" + i + "]'><img src='" + data.data[i].images.low_resolution.url + "'></img></li>");
   		}
	  }
	});
//try to animate one of the images
TweenLite.to($('#photo[1]'), 2, {opacity:"0.5", ease:Bounce.easeOut, delay:2});

This is not working for some reason. If i try to animate the <ul>, that works. But not the <li> or <img> elements. Does anyone know what i am doing wrong here?