Jump to content


Animations not working on images loaded via api

Go to solution Solved by Jonathan,

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 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">


And then the js is like this :

	  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?

Link to comment
Share on other sites

Hi, and welcome to the forums.
photo[1] is not technically a valid id so jQuery is selecting nothing from that selector, hence there is nothing to tween. If you log or alert $('#photo[1]').length you will see it is 0. Remove the brackets from the <li> id and jQuery selector and it will work correctly.


(ok so brackets are no longer forbidden in the HTML5 spec, and jQuery can select them if they're properly escaped i.e.


Still, it's much easier to just use underscores or something...)


See the Pen Bioun by jamiejefferson (@jamiejefferson) on CodePen

Next time, please consider making a reduced codepen demo as we don't always have time to do that for you and figure out how your code sample runs.

  • Like 3
Link to comment
Share on other sites



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

Link to comment
Share on other sites

  • Solution

Hello tarunfzr,


Was this what you wanted .. the thumbnail photos to fade opacity in after AJAX success?


See the Pen kfJbE by jonathan (@jonathan) on CodePen


You can add your tween so it runs after your for loop in your AJAX success handler. Also setting the opacity to 0 for each thumb with GSAP within the for loop.



  • Like 4
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.