From the course: CSS: Scrolling and Parallax

Installing GSAP - CSS Tutorial

From the course: CSS: Scrolling and Parallax

Start my 1-month free trial Buy for my team

Installing GSAP

“

- [Narrator] Scroll magic gives you two ways of adding tweens to your animations. One of them is using this library called "Velocity.js". It's a pretty simple library that gives you essentially the features that are available with jQuery, but with without jQuery, and you can use that if you want to. However, a much more powerful framework is GreenSock. Now this is a JavaScript animation library. So it can do a lot of stuff and it's much more powerful than Velocity. It gives you the ability to control SVGs, as well as Canvas, and any DOM element on the page. Here's the installation page, and you can download it by clicking on this icon right here, and then saving it somewhere in your hard drive. Once you decompress it, you'll see that it's got a number of different files. There are some versions that will be more for loading with modules, which will be this UMD folder. And then there's this source folder which has the non-compressed versions of the files. Again, you want use these if you are wanting to read some of the JavaScript, or you want to make some modifications to the original. And you can also look at the minified files. Now, these are going to be the ones that you want to install for production. And so, what you're going to need for this project is going to be this GSAP.MIN.JS. You can also install the map if you want to. And that is the core library. As you can see, there are a number of additional plug-ins and extensions. It's a fairly small library by itself, but then once you add some of these other elements, you'll see that you can add a lot more than just the core library. All we're going to need for ScrollMagic is the core library, and I've already placed that in here for you. Right here, there's the GSAP.MIN.JS. So just like with all the other libraries, we're going to need to install that into our project. Now you're going to want to do that before ScrollMagic, just so that it's available to that library as well. So, I'm going to do a script, and I'm going to look in the JS folder, then the lib folder. And just look for GSAP.MIN.JS. And let's go ahead and save that. Once you do that, you'll be able to use it with ScrollMagic, and create really fast and performant animations.

Contents