Jump to content
Search Community

Tween an array after an ajax call and new DOM elements

Romrom test
Moderator Tag

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

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 ?

Link to comment
Share on other sites

Hi and Welcome to the GreenSock forums.

 

When you say

 

by default all elements are non visible

 

Do you mean that their visibility is set to hidden? or is the opacity just set to 0?

 

If you set visibility:hidden then tweening the opacity alone isn't going to make them appear.

 

In order to toggle the visibility to visible and tween the opacity to 1 try this:

 

TL.staggerFromTo(videos,3,{css:{autoAlpha:0}}, {css:{autoAlpha:1}},0.2);

 

Also, I noticed that you staggerFromTo is malformed.

 

bad:

TL.staggerFromTo(videos,3,{css:{opacity:0},css:{opacity:1}},0.2);

 

good:

TL.staggerFromTo(videos,3,{css:{opacity:0}}, {css:{opacity:1}},0.2);

 

Its important to note that the from vars object contains a css object AND the to vars object contains a css object. Lots of {} to keep on top of.

 

Let me know if any of this helps with your issue.

Link to comment
Share on other sites

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

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.
×
×
  • Create New...