The Beginner‘s Guide to the GreenSock Animation Platform (GSAP)

like this:

To fade it in and move it using GSAP, we could write:

gsap.from("#box", {
duration: 1,
opacity: 0,
y: 50
});

This tells GSAP to animate the element with an id of "box", over a duration of 1 second, from 0 opacity and 50 pixels down, to its normal state. The opacity and y properties are two of the many CSS properties GSAP recognizes.

The gsap object is your main interface to GSAP. Its from() method defines the starting values for an animation that plays forward to the element‘s current state. You can also use to() to define the end state, and fromTo() to specify both start and end explicitly.

Here‘s the previous animation re-written with to():

gsap.to("#box", {
duration: 1,
opacity: 0,
y: 50
});

And with fromTo():

gsap.fromTo("#box",
{ opacity: 0, y: 0 },
{ opacity: 1, y: 50, duration: 1 }
);

With these simple building blocks – to, from, and fromTo – you can construct an enormous variety of animations!

Animatable Properties

GSAP can handle all kinds of animation values – not just numeric properties like position and opacity, but also colors, hex codes, strings with suffixes like vw/vh, and even CSS variables!

For example, to animate an element‘s background from red to blue, we could do:

gsap.to(".colorful", {
backgroundColor: "#00FFFF",
duration: 1
});

Or to animate a custom CSS variable:

gsap.to(".custom-prop", {
"–size": "42px",
duration: 1
});

Just be sure to camelCase property names, like borderTopWidth instead of border-top-width.

When animating positional properties, GSAP defaults to px values, but you can use any unit by providing a string:

gsap.to(".mover", {
x: "40vw",
y: "4em",
duration: 1
});

See the GSAP docs for a full list of animatable values.

Easing

Easing controls how an animation progresses over time. Does it start slow and speed up? Slow down at the end? Bounce back a little? The right easing can make an animation feel more natural and alive.

GSAP has a built-in library of standard eases to pick from:

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

This will move the element 100px with a bouncy effect. Other common choices are "power1" for gentle easing, "back" for overshoot, and "elastic" for springy behavior.

For extra control, most eases can be modified further:

gsap.to(".box", {
x: 100,
duration: 1,
ease: "back.inOut"
});

The .inOut makes it symmetrical, easing into and out of the animation. See the ease visualizer for an interactive tour of the different options.

Timelines

For choreographing more complex animation sequences, GSAP provides timelines. A timeline is a container for tweens that you can control as a whole.

To make one, use gsap.timeline():

let tl = gsap.timeline();

tl.to(".a", {x: 100, duration: 1})
.to(".b", {y: 50, duration: 1})
.to(".c", {rotation: 90, duration: 1});

Calling methods like to() and from() on the timeline adds "child tweens" to it. The timeline plays them in sequence by default.

You can also specify exact times for timeline tweens using the position parameter:

tl.to(".a", {x: 100, duration: 1})
.to(".b", {y: 50, duration: 1}, "-=0.5")
.to(".c", {rotation: 90, duration: 1}, "+=1");

Positions can be absolute (2.5) or relative (-=0.5). This allows flexible arrangement and overlapping.

Timelines can be controlled just like individual tweens – paused, reversed, restarted, etc:

tl.pause();
tl.resume();
tl.seek(0.5);
tl.reverse();

This makes them a powerful tool for directing intricate, multi-part animations!

Plugins

GSAP has a plugin architecture for extending its core capabilities. Some handy plugins to know about:

• ScrollTrigger – start and control animations based on scroll position
• TextPlugin – animate text in a variety of ways, like typewriter effects
• MorphSVG – smoothly transition from one SVG shape to another
• MotionPathPlugin – guide elements along curved paths (demos)

There are dozens of plugins to explore! Most are in a club-level membership, but a core set are free and open source.

Optimization Tips

Animating with code gives a lot of control, but it‘s important to keep an eye on performance, especially for resource-constrained devices. Some tips:

Use transforms: Stick to animating transforms (x, y, scale, rotation) and opacity when possible, as browsers can optimize these properties. Avoid animating properties that affect layout, like width and height.

Keep selectors simple: Like with CSS, simpler selectors like ids and classes are faster than complex or nested selectors.

Limit simultaneous animations: Having too many elements animating at once can bog things down. Use timelines to sequence animations and spread them out.

Remove listeners: If you set up event listeners in GSAP callbacks, remove them when no longer needed to prevent memory leaks.

Interactivity

GSAP isn‘t just for static, pre-defined animations – it can also react dynamically to user input!

The ScrollTrigger plugin makes it easy to trigger animations based on scroll position:

gsap.to(".box", {
x: 500,
scrollTrigger: {
trigger: ".container",
start: "top center"
}
});

Here, the animation starts when the top of .container reaches the center of the viewport.

You can also use regular event listeners to kick off GSAP animations on clicks, hovers, etc:

document.querySelector("button").addEventListener("click", () => {
gsap.to(".target", {x: 100, duration: 1});
});

Or scrub animations based on mouse/touch movement:

let box = document.querySelector(".box");
let rect = box.getBoundingClientRect();
let mouse = {x: 0, y: 0};

window.addEventListener("mousemove", (e) => {
mouse.x = e.x / rect.width;
mouse.y = e.y / rect.height;

gsap.to(box, {
x: mouse.x 100,
y: mouse.y 100
});
});

The possibilities are endless! Tying animations to user input is a great way to add life and interactivity to a site.

Putting It All Together

We‘ve only scratched the surface of what GSAP can do, but hopefully this gives you a foundation to start experimenting! Here‘s a recap of the key concepts:

• Use to(), from(), and fromTo() to define animations
• Animate CSS properties, SVG attributes, colors, and custom values
• Fine tune timing and feel with eases
• Orchestrate complex sequences with timelines
• Extend functionality with plugins
• Optimize by animating transforms and limiting complexity
• Tie animations to user input for interactivity

Learn More
The official GreenSock docs are an excellent resource, with guides, tutorials, and exhaustive API references.

For inspiration, check out the incredible showcase of GSAP animations on CodePen. Studying and remixing advanced techniques is a great way to up your animation game.

Happy animating! With GSAP in your toolkit, you can add motion and life to your web projects in fun and creative ways. The only limit is your imagination.