GSAP Basics: Start Animating Today

What is GSAP?

GSAP (GreenSock Animation Platform) is a powerful JavaScript library that has become the industry standard for creating high-performance web animations. Used on over 11 million websites, including many award-winning ones, GSAP allows you to animate virtually anything JavaScript can touch - from HTML elements and CSS properties to SVG graphics, Canvas elements, and even React components.

Unlike CSS animations which can be limiting for complex sequences, GSAP provides developers with precise control over every aspect of their animations while maintaining excellent performance across all browsers. The library is renowned for being up to 20 times faster than jQuery and even outperforms CSS animations in many cases.

Key Features of GSAP

Performance: GSAP is optimized for high-performance animations, even in complex scenarios involving many elements or frequent updates.

Cross-Browser Compatibility: Works seamlessly across all modern browsers and devices without compatibility issues.

Flexibility: Supports animating various properties including transforms, colors, opacity, and more with advanced control options.

Ease of Use: The API is intuitive, making it possible to create animations with minimal code.

Plugin Ecosystem: GSAP offers numerous plugins like ScrollTrigger for scroll-based animations, extending its functionality significantly.

Core GSAP Concepts

Understanding Tweens

At the heart of GSAP is the concept of "tweening" - the process of animating a property from one value to another over a specified duration. Think of a tween as a high-performance property setter that smoothly transitions values over time.

GSAP provides several methods for creating tweens:

gsap.to(): Animates from current values to new values
gsap.from(): Animates from specified values to current values
gsap.fromTo(): Defines both starting and ending values
gsap.set(): Immediately sets values without animation

Here's a basic example:

javascriptgsap.to(".box", { duration: 2, x: 100, opacity: 0.5 });

This animates an element with class "box" to move 100 pixels to the right and fade to 50% opacity over 2 seconds.

Understanding Timelines

A Timeline is a container for tweens that acts as a powerful sequencing tool. Instead of managing complex delays for individual animations, timelines allow you to control multiple animations as a cohesive sequence.

Without timelines, you'd need to calculate delays manually:

javascript// Without timelines - cumbersome delay management
gsap.to("#id", { x: 100, duration: 1 });
gsap.to("#id", { y: 50, duration: 2, delay: 1 }); // wait 1 second
gsap.to("#id", { opacity: 0, duration: 1, delay: 3 }); // wait 3 seconds

With timelines, sequencing becomes elegant:

javascriptlet tl = gsap.timeline();
tl.to("#id", { x: 100, duration: 1 })
  .to("#id", { y: 50, duration: 2 })
  .to("#id", { opacity: 0, duration: 1 });

Getting Started - Basic Setup

To begin using GSAP, you need to include the library in your project. The easiest way is through a CDN:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Tutorial</title>
</head>
<body>
    <!-- Your HTML content -->

    <!-- GSAP CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script>
        // Your GSAP animations here
    </script>
</body>
</html>

Detailed Analysis of the Loading Screen Example

Loading Screen URL: https://pod-request-landing-page-kappa.vercel.app

Now let's dive deep into the loading screen example from the Svelte project, breaking it down step-by-step from a beginner's perspective.

The HTML Structure

<div class="loading-screen">
    <div class="container">
        <img class="intro-logo" src="/assets/img/logo.svg" alt="Pod logo">
        <div class="divider"></div>
        <div class="mask"></div>
        <div class="intro-heading">Publish Your Podcasts <br> <span>Everywhere.</span></div>
    </div>
</div>

This creates four key elements that will be animated:

Logo image: Will move horizontally during the animation
Divider: A thin vertical line that grows and shrinks
Mask: A black rectangle that helps create reveal effects
Heading text: The main text that fades in and out

The CSS Setup

The CSS positions all elements absolutely within the container, with specific initial states:

Loading screen: Covers the full viewport with a black background
Divider: Starts with height: 0rem (invisible)
Heading: Starts with opacity: 0 (invisible)
Mask: Positioned to initially cover content

This setup is crucial because GSAP will animate from these initial states.

The GSAP Animation Timeline - Step by Step

Let's break down each line of the GSAP code to understand what happens:

1. Creating the Timeline

let timeline = gsap.timeline({ defaults: { ease: 'power1.out' } });

This creates a new timeline with default easing applied to all animations. The power1.out easing creates smooth, natural-feeling motion that starts fast and slows down at the end.

2. Growing the Divider

timeline.to('.divider', { height: '8rem', duration: 1 });

The first animation grows the divider from 0 to 8rem height over 1 second, creating a "line drawing" effect that captures attention.

3. Moving the Logo Left

timeline.to('.intro-logo', { left: '25%', duration: 1 }, '-=.6');

This moves the logo to the left side of the screen. The '-=.6' parameter is crucial - it means "start this animation 0.6 seconds before the previous animation ends". This creates smooth overlapping motion rather than jarring sequential steps.

4. Revealing the Heading

timeline.to('.intro-heading', { opacity: '1', left: '55%', duration: 1 }, '-=1');

The heading fades in while simultaneously moving to its final position. The '-=1' means this starts 1 second before the logo movement ends, so it happens almost simultaneously.

5. Centering the Logo

timeline.to('.intro-logo', { left: '51%', duration: 1, delay: 1 });

After a 1-second pause (delay: 1), the logo moves back toward the center. This creates a moment for users to read the heading.

6. Hiding the Heading

timeline.to('.intro-heading', { opacity: '0', duration: 1 }, '-=1');

The heading fades out, overlapping with the logo's return movement for smooth choreography.

7. Shrinking the Divider

timeline.to('.divider', { height: '0', duration: 0.5 });

The divider quickly shrinks back to nothing, preparing for the screen's exit.

8. Fading Out the Loading Screen

timeline.to('.loading-screen', { opacity: '0', duration: 0.5, delay: 0.25 });

The entire loading screen fades out after a brief delay.

9. Removing from Layout

timeline.to('.loading-screen', { display: 'none' });

Setting display: none completely removes the loading screen from the page layout.

10. Enabling Page Interaction

timeline.to('body', { overflow: 'visible' });

Finally, the body's overflow is set to visible, allowing users to scroll and interact with the main content.

Integration with Svelte

The Svelte component (App.svelte) provides the perfect framework for this animation:

Conditional Rendering

{#if window.innerWidth >= 800}
    <LoadingScreen/>
{/if}

The loading screen only appears on larger screens, improving mobile experience where such animations might be overwhelming or unnecessary.

Initial Body Styles

global(body) {
    overflow: hidden;
    min-height: 100vh;
    background-color: var(--color-very-dark-blue);
}

The CSS sets overflow: hidden initially, preventing scrolling during the loading animation. GSAP's final step restores overflow: visible when the animation completes.

Responsive Background Images

The container uses different background images for mobile, tablet, and desktop breakpoints, creating a polished experience across all devices.

Key Learning Points for Beginners

1. Timeline Sequencing is Powerful

Instead of calculating complex delays, timelines let you build animations step-by-step with precise control over timing and overlaps.

2. Overlapping Creates Smooth Flow

The '-=0.6' and '-=1' parameters create overlapping animations that feel natural and fluid rather than robotic.

3. Performance Matters

GSAP handles the heavy lifting of animation calculations, ensuring smooth 60fps performance even with complex sequences.

4. User Experience Integration

The animation serves a purpose - it entertains users during loading while preventing unwanted interactions, then seamlessly transitions to the main content.

5. Framework Integration

GSAP works beautifully with modern frameworks like Svelte, React, or Vue, complementing rather than conflicting with their reactivity systems.

Getting Started with Your Own Animations

To begin your GSAP journey:

Start Simple: Practice with basic gsap.to() animations before building complex timelines.
Use the Documentation: GSAP's official documentation is comprehensive and beginner-friendly.
Experiment with Easing: Try different easing functions to understand how they affect animation feel.
Build Gradually: Start with single-element animations, then progress to coordinated sequences.
Study Examples: Platforms like CodePen have thousands of GSAP examples to learn from.

GSAP transforms static web pages into engaging, interactive experiences. With its intuitive API and powerful features, it's the perfect tool for bringing your creative visions to life while maintaining professional performance standards.

GSAP Basics: Kickstart Your Path to Animation

Table of contents