- Timelines sequence multiple animations, ensuring events happen in a precise order.
- Use methods like stagger to apply sequential delays to groups of elements.
- Mastering easing functions controls the velocity and feel of motion.
- Timelines coordinate multiple animations, making complex motion reliable.
Understanding GSAP Timelines: Why Sequencing Matters
Simple animations work. Professional web experiences need coordination. You rarely animate a single element alone. Instead, you combine movement, fades, and transformations. This is where the GSAP Timeline becomes essential.
A timeline is a container for animations. Think of it like a film strip. Each animation you add occupies a specific point in time. This capability moves you past basic GSAP animation basics. You gain predictable control over timing, making complex sequences reliable.
Managing timing with multiple, independent animation calls creates code that is hard to read and difficult to debug. The timeline solves this problem. It provides a single, ordered execution context. It lets you accurately control which elements appear, when they appear, and how they interact.
The Fundamentals: Building Your First Timeline with gsap.timeline()
Building a timeline starts with the core function. You initialize the timeline, then you add animations to it. The structure is straightforward. You add animations sequentially, and they play back in order by default.
To build a GSAP animation, first select your timeline object. Then, use the timeline's methods to add the animation calls. For example, you might animate an element's opacity from zero to one. You might immediately follow that with animating its position from the left edge to the center. The timeline manages the transition time between these two actions.
// Initialize the timeline
gsap.timeline({ defaults: { duration: 1, ease: "power2.out" }})
.from("#box1", { opacity: 0, x: 100 })
.to("#box1", { opacity: 1, x: 0 }, "+=0.5") // The "+=0.5" adds a 0.5s delay
.from("#box2", { opacity: 0, scale: 0.5 });(This code animates #box1, waits half a second, then animates #box2.)
Remember that the timeline tracks time. If you want the second animation to start exactly when the first finishes, you simply add the second animation call. The timeline handles the duration and the total elapsed time automatically.
Advanced Sequencing: Using stagger, repeat, and grouping animations
Mastering basic sequencing requires advanced tools. The timeline provides several powerful methods for complex control.
Staggering Elements
The stagger utility is crucial for lists or groups of items. If you have ten icons that need to fade in, do not make them all fade in simultaneously. Staggering applies a small, increasing delay to each element in a selected set. This creates a natural, wave-like entry effect. You apply the stagger method to the collection of elements you want to animate.
gsap.timeline()
.from(".icon", { opacity: 0, y: 50, stagger: 0.2, duration: 0.8 });(This animates all elements with class "icon," giving each one a 0.2-second delay.)
Repeating and Looping
Use the repeat functionality for continuous motion. You can tell the timeline to loop a specific animation block indefinitely, or only a set number of times. This is ideal for background elements or loading indicators that must run continuously.
Grouping Actions
Sometimes you need several animations to happen at the same time. You can group these actions within the timeline. This tells GSAP to start the group of animations at the same time point. To achieve concurrency, you must explicitly set the start time for all animations.
gsap.timeline()
.to("#header", { x: 50, duration: 1 }, 0) // Starts at time 0
.to("#sidebar", { scale: 1.2, duration: 1 }, 0) // Starts at time 0
.to("#content", { opacity: 1, duration: 1 }, 0); // Starts at time 0
(By setting the time parameter to 0 for all calls, they begin simultaneously and run concurrently.)
Pro Tips: Mastering Easing and Creating Complex, Cohesive Motion Sequences
The difference between a basic animation and a professional one is often the easing. Easing controls the acceleration and deceleration of motion. Do not use linear motion, which looks robotic. Instead, use easing functions like "back" or "elastic." These functions simulate real-world physics, making the motion feel natural and weighted.
Experiment with different easing curves. A slight overshoot followed by a gentle settle often looks more polished than constant velocity. When building complex motion sequences, always consider the entire user journey. How does the animation from the previous section transition into the next? The timeline helps you choreograph these handoffs smoothly.
Use the timeline to manage multiple properties simultaneously. You can animate position, rotation, and color change all within the same time window. This simultaneous animation, or compositing, creates depth and a sense of cohesive movement.