An Overview of GSAP

Here we will use GreenSock's animation framework, GSAP, to animate our graphic.

GSAP, GreenSock Animation Platform, is an animation library that will interact with the DOM to make complex animations happen in a few lines of code. We will be utilizing it for all of our animations during this guide.

Installing GSAP

There are a few ways to load GSAP into your project. The quickest way is with a CDN link provided by GreenSock. The benefit to using the CDN link is your GSAP file will always be the most up to date. A major drawback is the file will be loaded over the public network and that can be prone to slow load times. For development, a CDN link is fine but, for any major production work we recommend downloading the file locally.

GSAP via a CDN Link

Using a CDN link is as simple as including a script tag with the src attribute set the the CDN link. It needs to be inserted prior to any animation scripts loading.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js" ></script>
<script src="./js/lower.1.js"></script>

Check GreenSock's website for the most up to date CDN link.

Downloading GSAP Locally

We will use NPM to easily install GSAP to our project. If you have not installed NPM, check out the Development Setup part of this guide. Begin by opening a command prompt / terminal in the root folder of this project ( html-lower-third ). Then install GSAP via NPM with this command.

npm install gsap

Finally we will the required script tag pointing to the installed gsap.js file in our lower-third.1.html file.

<script src="./node_modules/gsap/dist/gsap.js"></script>
<script src="./js/lower.1.js"></script>

Using GSAP

We will be explaining how to use each component of GSAP used in this project but, there is much more that will will not cover. If you want a more thorough introduction to GSAP, we would recommend the Getting Started page on GreenSock's website. For a more in depth look into animations and timelines, we would recommend Sequence Like a Pro also on GreenSock's Website.

The basic animations, or tweens, in GSAP follow a consistent pattern. They begin with the target or element being animated. Next is an object of properties that need to be animated on the element. The properties' values are the starting point or result of the animation.

/* Example */
const body = document.querySelector('body');

gsap.to(element, properties);

// Animates the background color to red
gsap.to(body, {backgroundColor: 'red'});
// Moves the .someClass element 10 viewport width units to the right
gsap.to('.someClass', {y: '20vh'});
// 'From To' sets the inital and ending values
// Move the #someID element from -10 vw units on the left 
// to 10 viewport units on the right (20 vw units moved in total)
gsap.fromTo('#someID', {x: '-10vw'}, {x: '10vw'});

These animation commands can be combined into a timeline to trigger each other sequentially.

/* Example */
const body = document.querySelector('body');
const timeline = new gsap.timeline();

timeline.to(body, {backgroundColor: 'red'})
    .to('.someClass', {y: '20vh'}) // Runs once the background color is red
    // Runs when .someClass is 20 vh units down from where it was
    .fromTo('#someID', {x: '-10vw'}, {x: '10vw'});

Timelines have the ability to set default values for their contained animations. We are interested in the duration and ease properties. Ease is out of scope for this guide but, checkout this GreenSock Easing Guide to learn more. We will setup our timeline with a default duration of 1 second and an ease of power1.out.

const timeline = new gsap.timeline({duration: 1, ease: 'power1.out'});

A timeline's final feature it the position property. This is added as the third parameter when creating a new animation.

timeline.to(element, properties, position);

timeline.to(body, {backgroundColor: 'red'})
    // Will run as the backround is changing colors
    .to('.someClass', {y: '20vh'}, 0) 
    // Will run half a second before the .someClass animation ends
    .fromTo('#someID', {x: '-10vw'}, {x: '10vw'}, '-=.5');

In the example above, we set the second animation to start at 0. This means the first and second animation will run at the same time. Then we set the final animation to run -=.5 seconds before the end of the previous timeline. Position does even more than that! Checkout GreenSock's full guide on their website.

That is all the content we will be using from GSAP within this guide. We barely scratched the surface so we recommend exploring the documentation and other guides on GreenSock's website.

Resources

• GSAP Homepage / CDN Link.
• Easing Documentation on GreenSock's website.
• Timeline Documentation on GreenSock's website.
• Position Guide on GreenSock's website.