GSAP - Timelines

https://greensock.com/docs/v3/GSAP/gsap.timeline()
https://greensock.com/forums/topic/12643-master-timeline-and-the-use-of-functions/

Master Timeline

Gutes Vorgehen für flexiblen Einsatz:

Celli, I read you question a little differently. it seems you are already using a modular approach, it's just that you are doing // WITHOUT Timelines (only using delays): gsap.to("#id", { x: 100, duration: 1 }); gsap.to("#id", { y: 50, duration: 1, delay: 1 }); //wait 1 second gsap.to("#id", { opacity: 0, duration: 1, delay: 2 }); //wait 2 seconds

What if you wanted to make the first animation longer? You'd need to adjust every delay thereafter. And what if you want to pause() the whole sequence or restart() it or reverse() it on-the-fly or repeat it twice? This could become quite messy, but GSAP's Timelines make it incredibly simple:

//WITH Timelines (cleaner, more versatile)
var tl = gsap.timeline({repeat: 2, repeatDelay: 1});
tl.to("#id", {x: 100, duration: 1});
tl.to("#id", {y: 50, duration: 1});
tl.to("#id", {opacity: 0, duration: 1});

// then we can control the whole thing easily...
tl.pause();
tl.resume();
tl.seek(1.5);
tl.reverse();
<syntaxhighlight lang="javascript">

Ältere Beispiele (v2)
<syntaxhighlight lang="javascript">
function getFirst() {
  var tl = new TimelineLite();
  tl.to(...)
  return tl;
}

function getSecond() {
  var tl = new TimelineLite();
  tl.to(...)
  return tl;
}

function getThird() {
  var tl = new TimelineLite();
  tl.to(...)
  return tl;
}

master.add(getFirst());
master.add(getSecond());
master.add(getThird());

The end result of both techniques is going to be identical and both offer a modular approach. However, wrapping your timelines in a function has two advantages which may not be applicable all the time, but its nice to have them:)

1: By using functions to create your timelines, you can create them "on-demand" only when needed. In the context of a large game or application the function-wrapped way means you don't have to create 500 timelines in advance, you can just call the proper function when you need a timeline.

2: You can create the same timeline multiple times and add each unique copy of the timeline to the same or any parent timeline. Although it isn't always necessary, it is very easy to use the function-wrapped technique to do

master.add(getFirst());
master.add(getFirst());
master.add(getFirst());
master.add(getSecond());
master.add(getSecond());

When it comes to doing elaborate, dynamic scene changes (based on user interaction) it makes things incredibly flexible.

Imagine your app has a variety of scenes, and each scene has its own timeline for animating in and out.

You could do something like:

navTimeline.add(scene1Out());
navTimeline.add(scene3In(), "-=1");

which would trigger the timeline that the scene3In() function generates 1 second before the scene1Out animation ends.

and then maybe later the user wants to go back to scene1

navTimeline.add(scene3Out());
navTimeline.add(scene1In(), "-=1");

The end result of this technique is that you can generate your transition timelines whenever you need them, as many times as you need them, and glue them together in any number of ways.

function carMove(){
var tl = new TimelineMax();
tl.to("#car", 2, {x:"+=200"})
/* more tweens go here */
return tl;
}

function wheelsRotate(){
var tl = new TimelineMax();
tl.to("#wheels", 2, {rotation:"+=360"})
/* more tweens go here */
return tl;
}

masterTL
.add( carMove())
.add( wheelsRotate());