Mujtaba Abid's Blog

Chapter 1: GSAP Basic Tutorial

Mujtaba Abid's photo
Mujtaba Abid
·

4 min read

Table of contents

You can use GSAP to animate pretty much anything JavaScript can touch, in any framework.

1. Tween and Timelines

Basic Tween

See the Pen GSAP3: basic tween start by Mujtaba Abid (@mujju88) on CodePen.

gsap.to() docs: https://greensock.com/docs/v3/GSAP/gsap.to()

The basic syntax for a to() tween is as follows:

gsap.to(".fred", {x:400}); // animates the element with a class of “fred” to an x position of 400.

If you do not specify a duration, gsap will use the default which is 0.5 seconds (500ms).

You can change the default duration using: gsap.defaults({ duration: 1 });

from() and fromTo()

See the Pen 2. from() and fromTo() by Mujtaba Abid (@mujju88) on CodePen.

gsap.from() animates from the values you specify to the object’s natural values.

To animate from x and y values of 400, use:

gsap.from(".fred", {x:400, y:400});

gsap.fromTo() animates from the values you specify to the values you specify.

The 2 objects in the code below are the from vars and to vars.

gsap.fromTo(".fred", {x:400, y:400}, {x:200, y:200});

For best results make sure the from vars and to vars have the same properties.

fromTo Exercise

1: Open: https://codepen.io/snorkltv/pen/qBBxPme

2: Type the following code:

gsap.fromTo(".fred", 
    {x:700, y:400, scale:1, opacity:0},
        {x:400, y:200, scale:3, opacity:1, duration:3});

3: Experiment with other properties.

Link and More

gsap.from() docs: https://greensock.com/docs/v3/GSAP/gsap.from()

gsap.fromTo() docs: https://greensock.com/docs/v3/GSAP/gsap.fromTo()

2. GSAP Targeted Properties

For best performance animate CSS Transform values and opacity:

  1. x

  2. y

  3. rotation

  4. rotationX

  5. rotationY

  6. skewX and skewY

  7. scaleX, scaleY, or just scale

GSAP can animate any numeric property you throw at it.

  1. width and height

  2. backgroundColor *hyphenated values need to be camelCase

  3. color

  4. padding

  5. left and top (must set position to relative, absolute, or fixed)

  6. vh and vw

3. Special Properties: Delay and Repeat

Special properties define how the animation should run and what it should do. Special properties are not animated.

delay: how much time should transpire before animation begins

repeat: how many times the animation should repeat

yoyo: when set to true the animation will play back and forth

repeatDelay: how much time should transpire between each repeat

An animation will repeat indefinitely if you set repeat:-1

Practice: Create a repeating animation

1: Open: https://codepen.io/snorkltv/pen/qBBxPme

2: Type the following code:

gsap.to(".fred", {x:300, repeat:-1, yoyo:true, repeatDelay:1});

4. Special Property: Ease and Using the Ease Visualizer

codepen.io/snorkltv/pen/oNNjZGY

1: Visit the GreenSock Ease Visualizer: https://greensock.com/docs/v3/Eases (bookmark this page).

An ease controls the rate of change as your animation plays.

In simple uses an ease will control whether your animation slows down or speeds up.

An ease can be applied on the way out (default), on the way in, or both directions.

The steeper the curve the faster change is taking place.

ease:”bounce” will bounce on the way out

ease:”bounce.in” will bounce on the way in

ease:”bounce.inOut” will bounce on the way in and out

Some eases can be configured

ease:”back.config(6)” will have a stronger overshoot

Practice

2: Spend some time playing with it and choosing different eases.

3: Open the pen at: https://codepen.io/snorkltv/pen/oNNjZGY

4: Change the code to use eases from the Ease Visualizer

5. Special Property: Stagger

creativecodingclub.com/courses/take/FreeGSA..

See the Pen 3. Speical Property Stagger by Mujtaba Abid (@mujju88) on CodePen.

The stagger property allows you to offset the start time of multiple targets in a single tween.

In GSAP3 you no longer need the staggerTo(), staggerFrom(), and staggerFromTo() methods of GSAP2.

// each image will start 0.2 seconds after the previous one starts.

gsap.to("#freds img", {y:-100, stagger:0.2});

A stagger object gives you greater control over where the staggers start from and how the timing is dispersed.

gsap.to("#freds img", {y:-50, stagger:{ each:0.2, from:"end"}});

each:0.2 means there will be 0.2 seconds between the start of each animation.

If instead you use amount:0.2 then all animations will start within 0.2 seconds.

Practice

1: Open the pen at: https://codepen.io/snorkltv/pen/bGGMMgz

2: Experiment with different stagger options in this code

gsap.to("#freds img", {y:-50, stagger:{ each:0.2, from:"edges" }});

Try changing each to amount.

Try changing “edges” to “center” or “end”.

Take a look at some of the more advanced stagger effects we cover in GSAP 3 Beyond the Basics

See the Pen Advanced staggers in GSAP 3 by Xusan (@Mirsharipov) on CodePen.

https://codepen.io/snorkltv

https://greensock.com/get-started

CheetSheet: https://greensock.com/cheatsheet/

Gradiant Magic: https://www.gradientmagic.com/collection/simpleangular

Example: https://codemyui.com/tag/gsap/

GSAP