Multiple Animations with User Select Option

VJ90102 · August 20, 2014

Are there any examples / tutorials showing how to handle multiple GSAP animations playing in sequence / repeating? A plus would be to have the user able to click to skip to the animation of their choice. This technique would probably require ajax to load the html and .js files.

GreenSock · August 20, 2014

Have you already seen this?: http://greensock.com/sequence-video

You can certainly create labels in a TimelineMax and use the tweenTo() or tweenFromTo() methods to go wherever you want in the timeline. Is there something in particular you want to know? Perhaps a simple codepen demo or pseudo code? I could write 50 pages on cool concepts with timelines, workflow possibilities, etc. - I don't want to overwhelm you.

If you haven't watched that video, I suspect it'll really help. And poke around the docs, paying special attention to tweenTo(), addLabel(), and the add() method. Heck, you can even pause() the timeline, and then tween its "progress" value. Yes, I said tween a timeline Once you grasp how the system works, you'll start getting all sorts of ideas.

VJ90102 · August 21, 2014

Thanks for the quick reply. I've seen that video and it helped me "get off the ground" with GSAP.

But let's take it up a level: I have multiple JavaScript files with GSAP timelines that operate on their own html files. I keep things in separate files because I can add new animations without disturbing/breaking what already works. I want to loop these animations in sequence, and allow the viewer to click a button and skip to whichever one they wish to view. Then the sequence continues from what they clicked. In other words, I need some sort of "player" that can sequence and jump between multiple animatins.

I've experimented with the following idea so far:

I have many pairs of JavaScript GSAP timeline files and html files. The JavaScript files contain closures with GSAP timelines, the html files contain the layout of images and text. I have a JSON file that lists what JavaScript file and html file work together. That JSON file can be read and loaded into an object array called "obMove".

Each obMove element contains:
.closure == name of the closure and containing file (closure "mymovie" is in file "mymovie.js")

.animbody == name of html file
.folder == folder path to these files

On a webpage, I use jQuery to AJAX load the JavaScript files into the <head> tag and the html file into a <div id='anim_banner'></div>. Here is the loading code:

// The JavaScript files accumulate in the <head> but are not loaded more than once
if (typeof window[objMove[ndx].closure] == 'undefined') {
  $('head').append("<scr" + "ipt  type='text/javascript' src='" +  objMove[ndx].folder +  objMove[ndx].closure  + ".js'></scr" + "ipt>"); 
}
  
// The paired html replaces the prior completely...
$('#anim_banner').load(objMove[ndx].folder + objMove[ndx].animbody, function(response, status, xhr) {  

  if (xhr.statusText == "OK") {
  // detect that images are loaded before running closure's onAnimStart() 
  $('#content').waitForImages(function() {  
    window[objMove[ndx].closure].onAnimStart(); // ... start timeline
  }); 
 
} else {
// html did not load -- skip to next closure
++ndx; 
} 
});

When enclosed in a loop (with some house keeping code) this works to play each animation in sequence. Now I want to add functionality to allow the user to kill a playing timeline and start another. I think this would involve calling a kill() function in the running closure.

I'm sure this has all been done before by someone. So, before "reinventing the wheel" I'd like to see what others have done. Can anyone point me to an example?

GreenSock · August 21, 2014

It sounds like you're just trying to queue some animations, but I'm not sure what the benefit is of putting them all into a master timeline in this case especially if you're trying to let people randomly ditch what they're currently watching and jump to the next thing, AND you're trying to dynamically load/instantiate everything.

If I were you, I'd probably just maintain a simple array of timelines, and only load a certain number of them, always having at least 1 or 2 ahead so that you get a fast response when the user skips. I'd use an onComplete on each timeline to trigger your queue logic to start playing the next one. This allows you to minimize memory usage too, since you can only keep 3 (or 4 or 5 or whatever) timelines and associated assets in the pipeline rather than loading everything and putting them all into a massive timeline.

Don't get me wrong - you could certainly do the master timeline thing. It'd be pretty cool and you could even have a master scrubber that lets people drag through everything, but of course that means all the assets would need to be loaded and ready to go. You could add a label at each spot on the master timeline where you place the sub-timelines, and use TimelineMax's getNextLabel() to jump to the next one whenever necessary. But again, if it were me I'd probably go for the simplistic array queue thing in this case unless I needed the master scrubber functionality.

I hope that helps.

Notifications

Messages

Multiple Animations with User Select Option

Warning: Please note

Recommended Posts

VJ90102

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

VJ90102

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members