Client.Style
Client.Style
📓

GSAP

Return to Client•Studio

GSAP

GSAP makes it easy to create animations in javascript. It's widely compatible and performance-oriented.

📢
For GSAP support contact Armando (at@client.fi)

Installation

Download via npm install gsap. To import GSAP and its plugins to a document, refer to the Installation section of their docs. This can be done via CDN or by adding something like this to the top of the main javascript file:

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

gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);

Tweens

A Tween is what GSAP calls a simple animation. It affects one or more elements with the same class or ID. For example:

gsap.to(".box", {rotation: 180, duration:1})
gsap.from(".box", {rotation: 180, duration:1})

The difference between both these animations lies in their method. The to method indicates that the object will have rotated to 180 degrees after 1 second. The from method, on the other hand, already rotates the object before the animation begins. After 1 second, the object will have rotated back to its current state from 180 degrees.

Timeline

In order to create a series of animations, GSAP includes a timeline option, which allows for a sort of animation storyboarding.

let anim = gsap.timeline();

		anim.to(".div-1", {rotation: 180, duration: 1})
		anim.to(".div-2", {x: 20})
		anim.to(".div-3", {autoAlpha: 0}, "<")

In this case, the animation runs in order: the first div-1 rotates, then once it's completed, the second div-2 moves right 20px, and the third div-3 fades out. AutoAlpha here controls the elements opacity and visibility. The third div-3 also has a "<" mark at the end of its method. This means its animation will begin at the same time as the previous one in the timeline.

Timelines, as well as tweens, can be played, paused or reset, as long as the timeline or tween is stored in a variable:

let anim = gsap.timeline();
anim.pause();

Functions

GSAP can run functions before or after an animation takes place. This can be helpful for example when removing an element from the DOM once it has faded out completely, or when updating classes.

gsap.to("div", {
	onStart: function(){
		this.target.classList.toggle("animating")
	},
	autoAlpha:0,
	onComplete: function(){
		this.target.classList.toggle("animating")
	}
})

Easing

GSAP animations can be smoothed out in a variety of ways. These are illustrated in the Ease Visualiser below. Eases are incorporated within a tween or timeline as follows:

gsap.to("div", {
	xPercent:10,
	ease: "power2.in"
})

ScrollTrigger

ScrollTrigger allows for animations synced to scroll. In practice, this looks something like this:

gsap.to(".div-1", {
	scrollTrigger: {
		trigger: ".div-2",
		start: "top center",
		end: "bottom center",
		toggleActions: "play pause resume reset"
	},
rotation: 360,
duration: 5,
})

There a few things to unpack here. First of all, it must be noted that an animating object's trigger does not always have to be the object itself. The trigger is given a start and end position, wherein the animation occurs. This is formatted as "top center" here, which means the animation will begin when the top of the object reaches the center of the page. These can also be written in pixels and percentages.

The toggleActions value controls how the animation works with the scroll. It has four states: onEnter, onLeave, onEnterBack, and onLeaveBack. In this example, the animation will play when the scroller has passed its start point, it will pause when the scroller has passed its end point, it will resume when the object enters again, and it will reset after scrolling all the way back past the beginning.