Introduction

Welcome to ! 👋

Whether you're a beginner dipping your toes into the world of or a seasoned developer looking to elevate your skills, you've arrived at the perfect destination.

This comprehensive guide is your roadmap to mastering GSAP.

From foundational principles to advanced techniques, this guide will take you on a journey through:
, insider tips, examples, & project ideas.

So, dive in, and let's embark on an exhilarating journey to unleash the full potential of GSAP.

What is GSAP?

GSAP is a JavaScript animation library for creating in every major browser.

It supports animating .

Known for its advanced sequencing and precise control, GSAP powers animations on over .

GSAP is than jQuery and handles browser inconsistencies effortlessly.

GSAP Setup

To use GSAP, you have multiple options for integrating it into your project.

1. NPM

Install GSAP via to manage dependencies efficiently within your project ecosystem.

This method is great for larger projects or those using tools like or .

2. CDN

For a quick setup, include GSAP directly via a CDN link in your HTML file.

This approach is perfect for smaller projects or when prototyping ideas.

3. React

If you're working with , use the library for seamless integration with React components.

This allows you to harness the power of GSAP within your React applications, leveraging its component-based architecture.

GSAP's flexibility ensures easy incorporation into your development workflow, whether you're building a traditional website, a single-page application, or a complex web application with React.

CDN Setup

To get started with GSAP, we first need to add the GSAP library to our HTML file. You can do this by grabbing the CDN link.

Here’s how it will look with the full link:

<script 
   src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" 
   integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" 
   crossorigin="anonymous" 
   referrerpolicy="no-referrer">
</script>

Key Tips:

• Place the before the script tag containing your . This ensures your file has access to the GSAP library and its functionality.
• If you're using any , make sure their script tags are placed .

GSAP Basics

GSAP is incredibly flexible; you can use it anywhere you like, and it has zero dependencies.

If you've used any version of GSAP in the past couple of years or are familiar with tools like , , , and , you'll notice that in the new version, GSAP 3.0, they have all been replaced by the .

Think of the as the main hub for everything in GSAP.

It's like a toolbox filled with all the tools you need to create and control and , which are the main things you'll be working with in GSAP.

To really get the hang of GSAP, it's important to understand and :

Understanding Tween

Think of a as the magic that makes things move smoothly—it's like a super-efficient property setter. You give it targets (the objects you want to animate), set a duration, and specify which properties you want to change.

Then, as the progresses, it calculates and applies the property values at each step, creating seamless animation.

Here are some common methods for creating a :

For simple animations (no fancy sequencing), the methods above are all you need! For example:

gsap.to(".box", { rotation: 27, x: 100, duration: 1 });

This will and elements with a class of "box" (is a shortcut for a transform) over the duration of 1 second.

Basic sequencing can be achieved by utilizing the special property.

Let's take a closer look at the syntax:

gsap.to(".box", { rotation: 27 });

• method —
• target —
• vars —

We've got a , a , and a object which all contain information about the animation.

The method(s)

There are four types of tweens:

This is the most common type of tween. A tween starts at the element's current state and animates "to" the values defined in the tween.

This is similar to a backwards tween. It animates the values defined in the tween and ends at the element's current state.

With this method, you define both the starting and ending values for the tween.

This method immediately sets properties without any animation. It's essentially a zero-duration tween.

These methods provide flexibility in how you create tweens and allow you to achieve various effects in your animations.

The target(s)

In GSAP, you need to specify what you want to animate, known as the or targets. GSAP internally utilizes , allowing you to use selector text like or for HTML or SVG targets.

Alternatively, you can pass in a variable or an Array.

Here are some examples:

// Using a class or ID
gsap.to(".box", { x: 500 });

// Using a complex CSS selector
gsap.to("section > .box", { x: 900 });

// Using a variable
let box = document.querySelector(".box");
gsap.to(box, { x: 200 });

// Using an Array of elements
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");
gsap.to([square, circle], { x: 200 });

These examples showcase how you can specify different for your animations in GSAP, allowing you to animate various elements with different properties and values.

The variables

The object holds all the details about the animation. It includes properties you wish to animate, as well as special properties that control the animation's behavior, such as , or .

Here's how you might use it in a tween:

gsap.to(target, { // This is the vars object
  // It contains properties to animate
  x: 200,
  rotation: 360,
  // Along with special properties
  duration: 2,
});

What properties can we animate?

With GSAP, you have the flexibility to animate almost anything you can imagine. There's no predefined list of properties you can animate because GSAP is incredibly versatile.

You can animate like , , , and , as well as custom object properties. GSAP even allows you to animate and complex strings!

While you can animate virtually any property, some of the most commonly animated properties include (such as , , ), , and . These properties are frequently used to create smooth and visually appealing animations across various elements on your webpage.

However, for more advanced sequencing and complex choreography, are the way to go. They make the process much easier & more intuitive.

Understanding Timeline

A serves as a container for , making it the ultimate tool for sequencing animations. With a Timeline, you have the power to position animations in time exactly where you want them.

You can effortlessly control the entire sequence using methods like , , , , and , among others.

The beauty of Timelines is that you can create as many as you need, and even nest them, which is great for organizing your animation code into manageable modules.

Here's the cool part: every animation (whether it's a Tween or another Timeline) is placed onto a parent timeline (which is usually the by default).

This means that when you move a Timeline's playhead, it cascades down through its children, ensuring that all the animations stay perfectly synchronized.

It's important to note that a Timeline is all about grouping & coordinating animations in time; it doesn't actually set properties on targets like Tweens do.

PLAYHEAD
|-------------------timeline----|-----------|
|--tween--|                     |
          |------tween2---------|-----------|

To create a in GSAP, you simply use the method:

gsap.timeline()

With GSAP's API, you have the power to control virtually anything on-the-fly.

You can manipulate the playhead position, adjust the of any child, play, pause, or reverse animations, alter the , and much more.

Sequencing things in a Timeline

To create a , you first initialize it like this:

var tl = gsap.timeline();

Then, you can add tweens using one of the convenience methods like , , or :

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

You can repeat this process as many times as needed. Notice that we're calling on the timeline instance (in this case, the variable ), not on the gsap object.

This creates a tween and immediately adds it to that specific .

By default, the animations will be sequenced one-after-the-other. You can even use method chaining to simplify your code:

// Sequenced one-after-the-other
tl.to(".box1", { duration: 2, x: 100 })
  .to(".box2", { duration: 1, y: 200 })
  .to(".box3", { duration: 3, rotation: 360 });

It's worth noting that while you could create individual tween instances with and then use to add each one, it's much easier to call , , or directly on the instance.

This approach accomplishes the same thing in fewer steps, keeping your code clean and concise.

Why choose GSAP with React?

While React-specific libraries provide a declarative approach to animation, GSAP offers unique advantages.

Animating imperatively with GSAP empowers you with greater control, flexibility, and creativity.

Whether you're animating allows you to unleash your imagination without limits.

What sets GSAP apart is its framework-agnostic nature. This means that your animation skills seamlessly transfer to any project, be it .

With GSAP, you won't need to switch between different libraries for different projects. It becomes your reliable toolkit, ensuring consistency and efficiency across all your goals.

React Setup

Setup for experimenting with React and GSAP.

Run this command to create a new Vite project with React template:

npm create vite@latest my-react-app -- --template react

Once the project is set up, we can install GSAP and the special GSAP/React package through npm:

// Install the GSAP library
npm install gsap

// Install the GSAP React package
npm install @gsap/react

// Start the project
npm start

Then import it into the app.

import { useRef } from "react";

import gsap from "gsap"; // <-- import GSAP
import { useGSAP } from "@gsap/react"; 

gsap.registerPlugin(useGSAP);

export default function App() {
  const container = useRef();

  useGSAP(
    () => {
      // gsap code here...
      gsap.to(".box", { rotation: 180 });
    },
    { scope: container }
  ); 

  return (
    <div ref={container} className="app">
      <div className="box">Hello</div>
    </div>
  );
}

What is that useGSAP() Hook?

GSAP works seamlessly with any JavaScript framework, without needing any special adjustments.

However, this hook is specifically designed to smooth out some React-specific challenges, letting you focus on the fun parts.

is a convenient replacement for or . It automatically manages cleanup using . Proper cleanup is important in React, and using Context makes it easy.

Simply import the hook from , and you're ready to roll!

Any GSAP animations, ScrollTriggers, Draggables, or SplitText instances created with the hook will be cleaned up automatically when the component is unmounted and the hook is removed.

import { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

const container = useRef();

useGSAP(
  () => {
    // gsap code here...
    gsap.to(".box", { x: 360 }); // <-- automatically reverted
  },
  { scope: container }
); // <-- scope is for selector text (optional)

Why is cleanup crucial?

Cleanup is crucial in animation, particularly with frameworks like React. In React 18, there's a default strict mode setting that can cause Effects to run twice locally. This double execution can result in duplicate or conflicting animations, as well as logic issues with tweens if not properly reverted.

The hook adheres to React's recommended practices for animation cleanup, ensuring that your animations are handled correctly and efficiently.

You can safely use this hook in or similar server-side rendering environments.

GSAP Easing

The GSAP official documentation defines easing as the primary method to adjust the timing of your .

Easing determines how an object transitions between positions at different points during an animation.

It controls the rate of change of animation and sets the style of an object's movement.

GSAP offers various types of eases and options to provide you with greater control over your animation behavior.

Additionally, GSAP provides an Ease Visualizer tool to assist in selecting preferred ease settings.

There are three main types of eases, each operating differently:

• : Animation begins slowly and accelerates towards the end.
• : Animation starts quickly and decelerates towards the end.
• : Animation starts slowly, accelerates in the middle, and then decelerates towards the end.

GSAP Plugins

A plugin extends the capabilities of GSAP's core functionality. By using plugins, the GSAP core remains lightweight while providing additional features that can be added as needed.

This modular approach allows you to customize your GSAP setup by including only the features that are required for your specific project, keeping your codebase efficient and focused.

To install or load a plugin, you have several options. Plugins are JavaScript files, similar to the core GSAP library.

You can install them using:

Here's how you can register a plugin

//list as many as you'd like
gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);

Remember, you need to load the before registering it. Registering a plugin with ensures seamless integration and avoids issues with build tools and bundlers .

You only need to register a plugin once before using it. It's okay to register the same plugin multiple times, but it doesn't offer any additional benefits.

ScrollTrigger Plugin Example

ScrollTrigger gives power to users to effortlessly create nice with minimal code.

It offers unparalleled flexibility, allowing you to easily implement such as , , , or triggering any scroll-related action, regardless of whether it involves animation or not.

Overall, provides a flexible and intuitive way to create engaging and interactions, making it a valuable tool for enhancing user experiences on the web.

Here's a simple example using ScrollTrigger to animate a box:

gsap.to(".box", {
  scrollTrigger: ".box", 
  x: 500,
});

In this example, when the element with the class enters the viewport, GSAP will animate it by moving it to the right.

ScrollTriggers can perform actions on an animation (play, pause, resume, restart, reverse, complete, reset) when entering/leaving the defined area or link it directly to the scrollbar so that it acts like a ().

GSAP Animation Course

GSAP Examples

ScrollTrigger Showcase

GSAP Animation Websites

Spilt Text Examples

Filer

Popular Demos

MorphSVG Showcase

DrawSVG Showcase

GSAP UI Design Examples

Talented coders that feature a ton of GSAP

Cassie Evans

Blake Bowen

Craig Roblewsky

Darin Senneff

Chris Gannon

Carl Schooff

Pete Barr

Steve Gardner

Ryan Mulligan

Cameron Knight

Tom Miller

Tip

The most important tip

Don't go overboard with animations. Not everything needs to move, and too many animations can make things confusing for users. Focus on animating things that make the user experience better.

Properties like transformations (such as , , ) and typically offer smooth performance across browsers.

On the other hand, properties like or can be computationally expensive and may cause performance issues, especially on low-end devices.

Ensuring that your animations perform well on low-end devices is crucial for delivering a consistent user experience across different devices and platforms.

Easing functions

Experiment with different easing functions to add smoothness and character to your animations. GSAP has options like (starts slow and speeds up), (starts fast and slows down), and others you can experiment with.

Explore plugins

GSAP has extra tools you can add to make your animations even cooler. For example, lets you animate text in unique ways, and lets you create animations that happen when you scroll down a webpage. These plugins can add extra flair to your animations without much extra work.

Preload assets

Preload any assets, such as or , that will be used in your animations to ensure smoother playback and prevent delays.

Practice with examples

One of the best ways to learn is by trying things out yourself. Look for examples of GSAP animations online and try to recreate them in your own projects.

Experimenting with different techniques will help you get better at creating your own unique animations.

Consider accessibility

Some people might have trouble with certain types of animations, like ones that flash or move around a lot.

Avoid animations that may cause discomfort or motion sickness, provide alternative content for , and allow users to pause or disable animations if needed.

Additionally, ensure that important information is still accessible even if someone can't see the animations.

Ensure that your animations are accessible to all users, including those with .

Test across devices

While GSAP is excellent in performance and provides a robust framework for creating animations, it's essential to remember that different devices have varying capabilities and screen sizes.

Therefore, thorough testing is necessary to guarantee a consistent and optimal UX across the board.

Not all devices are the same, so it's important to make sure your animations work well on all of them. Test your animations on different , , and to make sure they look good and run smoothly everywhere.

Congratulations!

You've completed The Complete GSAP Animation Guide. You now have a solid grasp of , from basic animations to advanced techniques, along with real-world examples and creative project ideas.

The library is undeniably fascinating, and I'm glad I could assist you in understanding how to use it while adhering to good practices and tips. 🙌

For a better understanding and access to more features, I suggest reading the and experimenting with different animation techniques.

Keep experimenting with your animations and applying what you've learned to your projects. The world of motion design is full of possibilities, and with GSAP, you're equipped to bring your ideas to life.

Happy animating, and have fun creating stunning visuals! 🎨🚀