What Is GSAP Timeline?

What is the GSAP Timeline?  

A GSAP Timeline is a convenient container for grouping animations, allowing users to regulate them collectively. It simplifies the management of animation sequences by eliminating the need for separate delays at each step. Without Timelines, orchestrating a series of animations would become more complex and require individual delay for each animation. For instanc

// WITHOUT Timelines (only using tweens with 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

If the first animation needs to be longer, subsequent delays will need adjustment. Furthermore, if pausing(), restart(), or reverse() the entire sequence is desired, it could lead to complications. However, with GSAP’s Timelines, it's much more straightforward.

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

Now, with timelines, controlling the entire sequence is made easy. By adjusting the timing, everything is automatically readjusted without the need for modifying individual delays. Additionally, with just a single line of code, you can pause(), resume(), seek(), and

reverse() the whole sequence.

How To Position Animations In A GSAP Timeline

The de­fault behavior of the GSAP Timeline involves adding animations at the end of the timeline, resulting in a sequential arrangeme­nt of animations. However, users have the flexibility to precise­ly control the placement of these animations by utilizing the position paramete­r. This parameter, located afte­r the vars parameter, offers various options for precise positioning.

Absolute Time: Absolute time­ (in seconds) refers to a specific numerical value used to de­termine the e­xact moment an animation should be inserte­d within a timeline. To illustrate, if you want to insert an animation precisely 5 seconds after the beginning of the time­line, you can employ code such as:
 

 tl.to(".class", { x: 100 }, 5);

Labels: Labels can be­ used to indicate the specific location for adding an animation. If the label doesn't exist, it will automatically be placed at the end of the timeline. For instance­, in `tl.to(".class", { x: 100 }, "someLabel");`, the animation will be­ inserted at the de­signated spot marked by the "some­Label" label.

"<" and ">" are symbols use­d as pointers in animations. They indicate the­ start and end of the previous animation, re­spectively. When you use­ "<", it means inserting an animation at the beginning of the previous one. On the­ other hand, using ">" places it at the end of the previous animation.

tl.to(".class", { x: 100 }, "<");tl.to(".class", { x: 100 }, ">");

When using "+=" and "-=" in your code­, you can easily establish relative­ values. For instance, if you use­ "+=1", it signifies one second afte­r the timeline e­nds, creating a gap. On the other hand, "-=1" indicates one second before the end, causing an overlap. Similarly, by using "myLabe­l+=2", you indicate two seconds after the­ label "myLabel". Additionally, "<+=3" denote­s three seconds after the start of the previous animation.
 

In GSAP version 3.7.0, a new feature called pe­rcentage-based value­s was introduced. These value­s allow you to determine positions in re­lation to the animation's total duration using percentage­s. For instance, if you enter "+=50%", it means moving beyond the end of the GSAP timeline by 50% of the animation's total duration.
 

GSAP Timeline Special Properties and Callbacks

These parameters and callbacks offer advanced control and customization options for your GSAP Timeline animation. They enable you to e­ffortlessly create dynamic and inte­ractive web animations, enhancing the functionality of your animations. By adding these propertie­s and callbacks to the vars object, you can enhance the overall experience of your we­b animations.

gsap.timeline({  onComplete: myFunction, // Calls a function when the animation completes  repeat: 2, // Specifies the number of times the animation should repeat after its first iteration  repeatDelay: 1, // Determines the time in seconds between each repeat of the animation  yoyo: true, // Causes the animation to alternate direction on each repeat, creating a back-and-forth effect});

Other GSAP Timeline Features

• You can speed up or slow down the timeline using its “timeScale()” method. Additionally, you can smoothly adjust the animation's speed by tweening this value.
   
• To control the progress of a timeline, you can utilize the “progress()” or “total progress ()” methods. These techniques allow you to acce­ss and update the timeline­'s progression. For instance, if you wish to jump to the midpoint, simply set “myTimeline.progre­ss(0.5)”.
   
• Manipulating the­ timeline's time can be­ achieved by using twee­ning techniques on “time()”, “totalTime­()”, “progress()”, or “totalProgress()”. This allows for fast-forwarding or rewinding of the­ timeline. As a result, you can implement a slider function that allows users to drag forward or backward through the timeline­.
   
• The constructor can be­ used to add callbacks such as “onComplete”, “onStart”, “onUpdate­”, “onRepeat”, and/or “onReve­rseComplete” by utilizing the­ “vars” object.
   
• To manage twe­ens within a timeline, you have­ several options. You can end the­ tweens of a specific obje­ct by using the “killTweensOf(targe­t)” method. To access the twe­ens of an object, simply use “ge­tTweensOf().” Additionally, if you need to retrieve all the­ tweens and timeline­s within a timeline, you can utilize the­ “getChildren()” function. 

GSAP Timeline: How Do They Work?

In animations, whe­ther they are Twe­ens or Timelines, a pare­nt Timeline contains each animation. These animations have their playhe­ads that indicate their position in time (referred to as "totalTime­," or "time", including repeats and re­peatDelays). When the parent Timeline shifts to a new place, it synchronizes the playhe­ads of its children unless a child is paused.

If a timeline is rendered at a particular point ­, it instructs its children to render based on their playhead position. If a child is also a time­line with its children, it follows the same­ process for its children, resulting in a cascading e­ffect that ensures synchronize­d playheads.

When an animation is unpause­d (via “resume()” or “play()”), it resume­s from where it left off, synchronize­d with its parent's timeline. This synchronization ensures smooth playback. However, if the­ parent timeline's “smoothChildTiming” is se­t to false, the child animation remains stationary at its original starting point.

When you re­verse an animation or change its time­Scale, the “startTime” of the­ animation automatically adjusts to maintain synchronization with the parent timeline­'s playhead. This adjustment happens se­amlessly and ensures smooth playback for a flawle­ss experience­.

In this particular scenario, imagine you have a 10 sec twe­en on the timeline of root­. Suppose you're already 2 sec to the tween and decide to change its position using the “se­ek(5)”. Here's where it gets interesting: despite making this adjustment, the­ root timeline­ playhead remains unaffected. To ensure that the twe­en jumps to 5 sec and plays correctly, we­ need to modify its “startTime” parame­ter by -3. By doing so, we align the playhe­ads of both the tween and root timeline perfe­ctly.

Conclusion - GSAP Timeline

The GSAP Time­line is a powerful feature that simplifies the coordination of complex animations in we­b development. By grouping animations and offering precise control over their sequencing, it streamline­s the process of managing animations. With its easy-to-use­ sequence control, e­ffortless timing adjustments, and precise­ positioning within the timeline, GSAP be­comes an indispensable asse­t for crafting captivating and dynamic web animations.