[Tween an array after an ajax call and new DOM elements]

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);
});
}
}

[Tween an array after an ajax call and new DOM elements]

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 ?