# data[].attributes.attachment_link.description
The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter which controls the placement of your tweens, labels, callbacks, pauses, and even nested timelines.

# data[].attributes.attachment_link.readable_text
I spent nearly 7 years as Geek Ambassador at GreenSock creating their official training materials, YouTube videos, and interactive demos that are all over greensock.com.

Having spent years in their support forums amassing over 9,000 posts I have quite a bit of experience teaching people how to animate with code and avoid common beginner mistakes.

With that position behind me and a totally new API introduced with GSAP 3, I knew I would still need a place to share all that excites me about scripted animation. That's why I created the Creative Coding Club, it provides a way for me to reach and teach the most people at a price anyone can afford.

# data[].attributes.attachment_link.description
I spent nearly 7 years as Geek Ambassador at GreenSock creating their official training materials, YouTube videos, and interactive demos that are all over greensock.com. Having spent years in their support forums amassing over 9,000 posts I have quite a bit of experience teaching people how to animate with code and avoid common beginner mistakes.

# data[].attributes.attachment_link.description
Get answers to your GSAP animation-related questions in GreenSock's warm, welcoming forums where experts and novices hang out.

# data[].attributes.attachment_link.readable_text
JavaScript animation libraries come and go, but ✨GreenSock✨ remains - for over a decade more than 10 million sites have been using the GreenSock animation platform (GSAP) tools because there are so many of them and they can solve almost any task. We learned it from experience and decided to create our own GreenSock tutorial for beginners and shed some light on this acclaimed lib.

About GreenSock

GSAP is not just a library for JS animations, it's a universal tool that allows creating both the most straightforward animations and transitions and incredibly complex scroll-driven animations and sequences. This library can animate any Document Object Model (DOM) elements (even SVGs), canvas elements (including the ones created with the help of other libraries), as well as any property or method of a JS object.

GSAP does not depend on the presence or absence of a JavaScript framework, it can interpolate units in different measurement units (like px in %, or RGB in HSL). GreenSock includes many useful plugins, easing tools, and utility methods.

There are many impressive and appealing demos both on and other resources like , and GreenSock showcase . However, with all their diversity, they are often too complex for those who are just starting to get acquainted with GreenSock's capabilities. So the goal of this GreenSock tutorial (with examples) is to get you started with making basic animations and show you how simple it is.

Let's take a look at the basics of the GreenSock library.

Table of contents

Key takeaways: Benefits and Drawbacks

Installation

To install the GreenSock library, use the commands: or npm install gsap.

The most common type of animation is , that is, animating a certain value. GSAP determines the initial animation values ​​automatically.

Parameters:

an object containing animated properties ( { opacity: 1, background:"#00CED1" } ):

If necessary, you can also specify the starting values ​​of the animated parameters using :

gsap.fromTo(".box", { opacity: 0.5 }, { opacity: 1 });

Or, you can set properties without animating them with :

GreenSock makes it very easy to make sequential animations with the help of the stagger property:

means that the elements will animate one by one every 0.3 seconds.

restartButton.addEventListener("click", () => { tween.restart() });
reverseButton.addEventListener("click", () => { tween.reverse() });

This approach to animation has a big drawback: what if the elements are out of viewport? But there is a fairly simple solution for this problem (see ScrollTrigger).

is a tool for creating complex sequential animations, which can consist of tween animations and other .

const timeline = gsap.timeline();

, like , can take on many different parameters, for instance:

const timeline = gsap.timeline({
	repeat: -1,
	yoyo: true,
	defaults: { duration: 1, ease: "easeInOut" }
});

animations allow you to create sequential animations for one or more elements and/or other animations. And a large number of properties and methods let you customize them incredibly flexibly.

You can extend GreenSock with nearly two dozen plugins .

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

This approach allows the GSAP's core to remain relatively small. It also lets you conveniently apply and use plugins only when needed and prevents problems with Tree shaking when executing the project's build.

As mentioned in the Stagger paragraph, often we want the animation to play only if it's in the viewport. But this is far from being the only use of ScrollTrigger . Let's take a closer look.

Set each to an initial value with . You can make the animation a bit more interesting. Depending on whether the element's index is even or odd, define opposite values ​​for the property. The list items will move from the position or to their original position after they appear in the viewport.

- defines the actual starting position of the animation. It can take a string, a number, or a function. So, for example, in our case, means that the top border of the touches 90% of the viewport. Other examples: , , etc. "top bottom + = 20"

toggleActions - a string that defines how the animation will play at 4 key points: , , , onEnterBack . It can take the following values: play, pause, resume, reset, restart, complete, reverse, and none. onLeaveBack

const listItems = Array.from(document.getElementsByClassName("list__item"));

listItems.forEach((item, index) => {
  gsap.set(item, { opacity: 0, x: index % 2 ? 100 : -100 });

  gsap.to(item, {
    x: 0,
    opacity: 1,
    scrollTrigger: {
      trigger: item,
      start: "top 90%",
      end: "bottom",
      toggleActions: "play reverse play reverse",
    }
  });
});

To check the accuracy of the values of and , use the property. It allows you to clearly see the key points of the animation:

ScrollTrigger also allows you to create the so-called pinned animations and bind their execution to the scrollbar position (scrub).

The animation declaration is not much different from the previous example, but there are a few differences:

- let's omit this property since the default value is suitable for us ( - when the bottom border of the touches the top of the viewport).

Pay special attention to the properties we didn't mention previously:

Don't animate a pinned element, this will cause an error in the calculation of the element's dimensions. You can animate any of its children instead.

invalidateOnRefresh - it accepts a boolean value. If , >ScrollTrigger will call the method to update or (it usually happens upon the page resize) to recalculate the start and/or end values ​​of the animation.
Alternative syntax
gsap.timeline({
	scrollTrigger: { ... },
})
.to(".box1", { ... })
.to(".box2", { ... });

ScrollTrigger.create({
	trigger: ".scroll-wrapper",
	start: "top top",
	end: "bottom",
	onToggle: self => { console.log("toggled, isActive:", self.isActive) },
  onUpdate: self => {
    console.log(
			"progress:", self.progress.toFixed(2),
			"direction:", self.direction,
			"velocity:", self.getVelocity()
		);
  }
});

ScrollTrigger can have many different uses . It's really up to you and your imagination.

The Draggable plugin makes it incredibly easy to create draggable, spinnable, tossable, and even flick-scrollable animations.

gsap.registerPlugin(Draggable, InertiaPlugin);

Draggable.create(".carousel", {
	...,
	inertia: true
} );

UI elements

Let's start with a basic element of almost any web page - the menu.

Everything is extremely simple here. First, we need to declare the variables:

And the last step is to set an event listener on click on the menuButton button. This listener will change the boolean variable to the opposite ( / ) and call, depending on this value, a function to animate the menu ( / ). animateShowMenu() animateHideMenu()

let isOpen = false;
const menuButton = document.getElementById("menu__icon");

const timeline = gsap.timeline();

const animateShowMenu = () => {
  timeline
    .to(".menu__list", { ... })
    .to(".menu__item", { ..., stagger: 0.1 })
};

const animateHideMenu = () => {
  timeline
    .to(".menu__item", { ..., stagger: 0.1, reversed: true })
    .to(".menu__list", { ... })
};

menuButton.addEventListener("click", () => {
  isOpen = !isOpen;

  isOpen ? animateShowMenu() : animateHideMenu();
});

Accordion (or drop-down in other words) is also a very useful and common interface element.

We need an array of accordion elements. You can simplify this task a little and use the GSAP method:

const list = gsap.utils.toArray(".accordion");

For each individual element, declare the variable , while in order to leave the first element of the list open by default, we'll assign the value to the variable with the condition of .

We'll also need the , , and elements - these are the ones we are going to animate. Set the initial state of the animated elements with . We also highly recommend that you write the same values ​​in the styles to prevent shifts when loading the page.

list.forEach((accordion, index) => {
  let isOpen = index === 0 ? true : false;

  const [ title, icon, content ] = [ ... ];

  gsap.set(title, isOpen ? { ... } : { ... });
  gsap.set(content, { height: isOpen ? "auto" : "0px" });
  gsap.set(icon, { scale: isOpen ? -1 : 1 });

  title.addEventListener("click", () => {
    isOpen = !isOpen;

    gsap.to(title, isOpen ? { ... } : { ... });
    gsap.to(content, { height: isOpen ? "auto" : "0px" });
    gsap.to(icon, { scale: isOpen ? -1 : 1 });
  });
})

More examples
Modal Navbar
Key takeaways

In the process of studying and using the GreenSock library, we noticed that it has many advantages and only a couple of minor disadvantages.

Flexibility and versatility.

Active community and with tens of thousands of questions already being resolved so you can very quickly get an answer and/or solution to a particular problem.

Support for interpolation of different values ​​(px in %, RGB in HSL, etc.)

GSAP's size can seriously inflate the project. In the screenshot below, you can see a report on the size of a small landing page project's bundle made with (TypeScript + , with no JS frameworks). The size of the GSAP and several plugins exceeds 413KB (Gzip: 119KB) or, in other words, it accounts for almost 88% of the total bundle size.

In general, the shortcomings are not critical and are rather subjective: the developers of any product have every right to make their product or its parts paid.

And the size of the library may not be a problem also. But in some cases, it can affect the decision whether the functionality and the scope of tasks solved by GreenSock are worth a bundle of this size.

GreenSock💚 is a unique multifunctional web animation library that not only solves browser inconsistency problems under the hood but is also high-performing and easy to use.

This GreenSock tutorial describes only a small part of the capabilities of the library. We hope it turned out to be interesting and useful and will serve as an impetus for further study of both GreenSock and web animations in general.

Articles you may also like:

# data[].attributes.attachment_link.title
GreenSock Tutorial for Beginners: Web Animation Library

# data[].attributes.attachment_link.description
JavaScript animation libraries come and go, but ✨GreenSock✨ remains - for over a decade more than 10 million sites have been using the GreenSock animation platform (GSAP) tools because there are so many of them and they can solve almost any task.