Greensock Animation API Study

See it Live: https://john-azzaro.github.io/Study-Greensock-Animation-API/

What is Greensock Animation API Study?

The "Greensock Animation API Study" is an exploration of the Greensock Animation API (GSAP). GSAP is a very handy animation library that helps you make preformant animations. In this study, you have a simple landing page with a headline and an image. Using GSAP, the image and headline use a simple animation to reveal on load.

Study Contents:

• What is Greensock Animation API Study?
• What are the key takeaways from the Greensock study?
• What libraries can you use with GSAP?
• How do you install the GSAP libraries
• What is a tween?
• What methods can you use with Tweens?
• What does a basic example using TweenMax look like?
• What is a timing function?
• How do you use TimelineMax to chain Tweens together?
• Screenshots

What are the key takeaways from the Greensock study?

Use tweenMax and TimelineMax

---

There are a few libraries you can choose from for tweens and timelines, the lite and max. Max has a lot more features and as long as you dont have an constraints around the lite vs max, just use max.

Make sure you run the tweenMax and TimelineMax BEFORE your JS file.

---

I tend to use defer on my JavaScript files so inserting the scripts after is not a problem. However, if you do not use defer, just insert the script at the very bottom of the HTML document.

Use the ease visualizer for spot-on transition effects.

---

With the visualizer, you can get a good idea of sample transitions as well as configure your own.

What libraries can you use with GSAP?

There are 4 libraries to choose from- TweenLite, TweenMax, TimelineLite, and TimelineMax. TweenMax has more features than TweenLite and TimlineMax has more features than TimelineLite.

GSAP Library:	Link:
TweenMax	https://greensock.com/docs/TweenMax
TimelineMax	https://greensock.com/docs/TimelineMax

How do you install the GSAP libraries?

To install your desired GSAP libraries, which for all intents and purposes is TweenMax and TimelineMax, you simply need to include the scripts in your HTML file before your JavaScript file. In this particular study, TimelineMax is used.

      <script
         src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"
         integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U="
         crossorigin="anonymous"
      ></script>
      <script
         src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"
         integrity="sha256-fIkQKQryItPqpaWZbtwG25Jp2p5ujqo/NwJrfqAB+Qk="
         crossorigin="anonymous"
      ></script>

What is a tween?

A "tween" is a SINGLE movement in an animation. The syntax for a tween is as follows:

TweenMax.method(element, duration, properties-to-animate)

• TweenMax is the Constructor (e.g. TweenMax, TweenLite, etc.).
• .method is the GSAP method you wish to use.
• element is the element you want to animate (note: you can pass in an array of elements if you wish).
• duration is the length of time you want to animate your element in seconds.
• properties-to-animate is an object of properties you wish to animate.

What methods can you use with Tweens?

The methods available to you through the GSAP API are varied and it is up to you to determine what would be best for you and the effect you want to achieve. However, there a few methods that should be good to know:

GSAP Library:	Description:
.delay	Delays the animation in seconds before executing.
	TweenMax.delay( value:Number );
.fromTo	Allows you to define the starting and ending values.
	TweenMax.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object );
.set	Immediately sets the properties of the target (i.e. no time duration).
	TweenMax.set( target:Object, vars:Object );
.to	Animates to a specified destination value (see below).
	Tweenmax.to( target:Object, duration:Number, vars:Object );

To find more methods you can use, see the TweenMax and TimelineMax documentatyion.

What does a basic example using TweenMax look like?

First, you need to select an element from the DOM in order to animate it. To do this, you can use a query selector and store as a const called "logo".

    const logo = document.querySelector('#logo');

Then, you simply call the "TweenMax" constructor and add your method and animation details.

    TweenMax.to(logo, 2, {x: 100})

In the example above, we want to animate a logo so that when the page loads, it will translate 100 pixels along the x-axis(i.e. go right). So, to do this we use the TweenMax constructor, add the .to method with will animate to a specified destination value (which will be 100px on the x-axis). Inside the parenthesis, you first specify the element, then the duraction (i.e. 2 seconds), and then inside an object you specify the location you want to animate to, specificially 100px along the x-axis.

What is a timing function?

A timing function uses the ease property to write a timing function. GSAP provides easing variables from Power0 - Power4 which tells GSAP how strong the easing needs to be. To find the right timing function, you can use the easing visualize below:

GSAP App:	Link:
Easing visualizer:	https://greensock.com/ease-visualizer

How do you use TimelineMax to chain Tweens together?

First, add a TimelineMax constructor. The TimelineMax constructor lets you chain multiple tweens together. When you chain tweens together, they will execute in the order in which they are chained together.

To use TimelineMax, first you need to create an instance of TimelineMax:

    const tl = new TimelineMax();

Then, you simply chain your methods to the tl variable and create your chained tweens.

    const tl = new TimelineMax();

    tl.fromTo(hero, 1, {height: "0%"}, {height: "80%", ease: Power2.easeInOut })
    .fromTo(hero, 1.2, {width:"100%"}, {width: "80%", ease: Power2.easeInOut})
    .fromTo(logo, 2, {opacity: 0, x: 30}, {opacity: 1, x: 0, ease: Power2.easeInOut});

Each follows from the other and each animation executes one after the other. However, suppose you wanto your logo (at the end), to animate at the same time as the second hero animation. To do this, you just add a "-=X" where X is the amount of seconds the previous element uses. So for example, if you want the logo to appear at the same time as the second hero animation, do this:

    tl.fromTo(hero, 1, {height: "0%"}, {height: "80%", ease: Power2.easeInOut })
    .fromTo(hero, 1.2, {width:"100%"}, {width: "80%", ease: Power2.easeInOut})
    .fromTo(logo, 2, {opacity: 0, x: 30}, {opacity: 1, x: 0, ease: Power2.easeInOut}, "-=1.2");

And if you wanted to logo to appear at the start when the first hero animation occurs, add that time as well:

    tl.fromTo(hero, 1, {height: "0%"}, {height: "80%", ease: Power2.easeInOut })
    .fromTo(hero, 1.2, {width:"100%"}, {width: "80%", ease: Power2.easeInOut})
    .fromTo(logo, 2, {opacity: 0, x: 30}, {opacity: 1, x: 0, ease: Power2.easeInOut}, "-=2.2");

Screenshots