Jump to content
GreenSock

tarunfzr

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

</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?

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.

$('#photo\\[1\\]')

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

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

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.
×