In this lesson you will learn how to install the Greensock library. First, what is Greensock?
What is Greensock?
Simply stated, Green Sock Animation Platform (GSAP or Greensock) is a series of javaScript libraries designed to make it easy for web designers to animate web elements. Web designers accomplish that by using Greensock functions that target specific HTML elements and then modify their properties over time.
In order to use Greensock functions, you need to load them first. You can either do that by downloading the libraries and hosting them on your server, or you can load the libraries by using the Greensock CDN (Content Delivery Network). Using the CDN provides advantages:
- You’re guaranteed to get the most recent version of GSAP
- The CDN server is almost always faster than your shared hosting (assuming you are a small business using shared hosting)
Greensock has created a page in their user documentation for installing the libraries; including the CDN resources. You can find that resource at https://greensock.com/docs/v3/Installation.
Select Install Helper.
By default you will notice that the GSAP’s core is selected by default. Select ScrollTrigger as well.
Then select CDN.
You will notice two HTML script tags. The first tag, …gsap.min.js, installs the core gsap library. The second HTML script tag, …ScrollTrigger.min.js, installs the ScrollTrigger plug-in library. The core library allows you to create Tweens and Timelines. The ScrollTrigger plug-in allows you to trigger those animations depending on the position of the containing element inside the viewport. Both script tag lines should be included in your HTML file just before the closing </body> element.