Romrom

Thanks for your reply, It was my mystake, when I get all my objects it is before I append them to my wrapper. So it wasn't a correct CSS selector. If someone is interested, here is the good code : var YOUTUBE = { wrappervideo: $('#videos'), animation_videos: function(videos) { var TL = new TimelineLite(); TL.staggerFromTo(videos,3,{css:{autoAlpha:0}}, {css:{autoAlpha:1}},0.2); }, get: function() { $.getJSON("//gdata.youtube.com/feeds/api/playlists/E269D6C105CB2EB6?&alt=json&max-results=10", function(data) { var thumbnails = new Array(); var video_grid = new Array(); var html = ""; var number_of_lines = 3; for(var i = parseInt(data.feed.openSearch$totalResults.$t - 1); i >= 0; i--) { thumbnails.push([data.feed.entry[i].media$group.media$thumbnail[0], data.feed.entry[i].media$group.media$thumbnail[1]]) }; for(var i = thumbnails.length - 1; i >= 0; i--) { var _left = ((thumbnails[i][0].width + 7) * Math.round(i % number_of_lines)); var _top = ((thumbnails[i][0].height + 7) * Math.floor(i / number_of_lines)); var video = "<img src='" + thumbnails[i][0].url + "' width='" + thumbnails[i][0].width + "px' height='" + thumbnails[i][0].height + "px' class='listvid' style='position:absolute;top:" + _top + "px;left:" + _left + "px;' data-min-height='" + thumbnails[i][1].height + "' data-min-width='" + thumbnails[i][1].width + "' data-min-url='" + thumbnails[i][1].url + "'></>"; html += video; }; YOUTUBE.wrappervideo.empty().append(html); YOUTUBE.wrappervideo.find('img').each(function (index,el) { video_grid.push(el); }) TweenMax.set(YOUTUBE.wrappervideo, { css: { marginTop: -parseInt(thumbnails[0][0].height), marginLeft: -parseInt(thumbnails[0][0].width), display: 'block' } }); YOUTUBE.animation_videos(video_grid); }); } }

Hello, I have a problem when I created an ajax request and want to tween new elements in my DOM. The idea : I get thumbnails from a youtube playlist and when it's done I add all thumbnails in a grid inside my DOM. By default all elements are non visible, once it's get loaded I tween them to make their opacity to 1. I think, like it's new elements TweenMax don't see them and can't make the animation works. Here's my code : var YOUTUBE = { wrappervideo: $('#videos'), animation_videos: function(videos) { var TL = new TimelineLite(); TL.staggerFromTo(videos,3,{css:{opacity:0},css:{opacity:1}},0.2); // for(var i = videos.length - 1; i >= 0; i--) { // TL.append(TweenMax.to(YOUTUBE.videos[i]), 0.5, { // css: { // opacity: 1 // } // }); // }; // TL.play(); console.log(TL) }, get: function() { $.getJSON("//gdata.youtube.com/feeds/api/playlists/E269D6C105CB2EB6?&alt=json&max-results=10", function(data) { var thumbnails = new Array(); var video_grid = new Array(); var html = ""; var number_of_lines = 3; for(var i = parseInt(data.feed.openSearch$totalResults.$t - 1); i >= 0; i--) { thumbnails.push([data.feed.entry[i].media$group.media$thumbnail[0], data.feed.entry[i].media$group.media$thumbnail[1]]) }; for(var i = thumbnails.length - 1; i >= 0; i--) { var _left = ((thumbnails[i][0].width + 7) * Math.round(i % number_of_lines)); var _top = ((thumbnails[i][0].height + 7) * Math.floor(i / number_of_lines)); var video = "<img src='" + thumbnails[i][0].url + "' width='" + thumbnails[i][0].width + "px' height='" + thumbnails[i][0].height + "px' class='listvid' style='position:absolute;top:" + _top + "px;left:" + _left + "px;' data-min-height='" + thumbnails[i][1].height + "' data-min-width='" + thumbnails[i][1].width + "' data-min-url='" + thumbnails[i][1].url + "'></>" video_grid.push($(video)); html += video; }; YOUTUBE.wrappervideo.empty().append(html); TweenMax.set(YOUTUBE.wrappervideo, { css: { marginTop: -parseInt(thumbnails[0][0].height), marginLeft: -parseInt(thumbnails[0][0].width), display: 'block' } }); YOUTUBE.animation_videos(video_grid); }); } } Do you see where I can make the animation run ?