Introducing GSAP0:00
The last animation library I want to show you is called gsap. It is a very comprehensive and powerful library and is an industry powerhouse. Gsap has been the defacto choice for animation professionals for a very long time. Actually, the library started in the flash days and then converted to JavaScripts, uh, when it needed to because Flash stopped being a thing. Uh, you might have heard of the library in its old
because Flash stopped being a thing. Uh, you might have heard of the library in its old name, green Sock. And by the way, GSAP stands for Green Sock Animation Platform. Gsap has an extremely good reputation for being battle tested, cross-browser compatible and extremely well thought through. You almost gotta think of it, uh, rather than an animation library
GSAP as Motion Platform0:44
You almost gotta think of it, uh, rather than an animation library as a full motion graphics design platform, something like Adobe After Effects. But for the web you can key frame anything and sequence everything on timelines. It's incredibly powerful. Let's take a look at the website. Alright, pretty cool intro. And like I just mentioned, you can literally animate anything.
Plugins and Capabilities1:03
And like I just mentioned, you can literally animate anything. It is so comprehensive that it is broken down in various plugins. So you have core functionality and then you bring tools like Scroll, SVG, text, uh, animations, UR interactions, and like I mentioned, they are incredible, incredible examples. The sort of websites where you look at them
Showcase Scroll Examples1:25
incredible examples. The sort of websites where you look at them and you're like, how do you even build something like this? This is the sort of stuff that is almost guarantee every single time to be built with gsap. Maybe let's take a look at this website real quick. All right, uh, nice, uh, little intro. Now let's start scrolling and see what happens. Okay, lots of storytelling happening with gsap.
Now let's start scrolling and see what happens. Okay, lots of storytelling happening with gsap. All right, so, ah, now we're scrolling down Parallax action and I'll show you how to do Parallax with, uh, GSAP. It's incredibly easy. Um, very nice. Again, this is tied to scrolling, so if I go up and down, it's responding to that. Uh, you get the idea. Like I said, very, very powerful library. Pretty much limitless in terms of what you can do.
Like I said, very, very powerful library. Pretty much limitless in terms of what you can do. Of course, it's going to have the biggest footprint of all libraries that we've looked at, but because it's broken down in plugins, you only bring what you need and it's actually still incredibly value for money in terms of the footprint versus what you can do. Another thing worth mentioning is gsap used to be a paid product. This is a professional tool for professional animators
Installation and Imports2:42
to be a paid product. This is a professional tool for professional animators and, uh, recently in the last year or so, Webflow, the big No Codes, uh, platform has acquired gsap and made all of the plugins free for use for everyone. If we jump in the documentation, you will see a lot of parallels with other libraries. Uh, for example, the way you install it is essentially pulling it from NPM, but like I mentioned, this is such a comprehensive library
pulling it from NPM, but like I mentioned, this is such a comprehensive library that if you want to use something like draggable that we've looked at or maybe scroll trigger, uh, you are going to import additional plugins to make sure that you don't pull too much code, because adding all of this functionality in the core import would be a little bit problematic. But if we look at the fundamentals here, gsap, basically you have a Gsap object, which is the access
Core API Fundamentals3:31
But if we look at the fundamentals here, gsap, basically you have a Gsap object, which is the access to everything the library has to offer. If you want to animate something, you go GSAP two and again, selector, and then properties to change. In the next video, we'll build a little timeline and we look at things like scroll triggers, but essentially green. So gives you all the power that you would need for simple animations and twinning,
So gives you all the power that you would need for simple animations and twinning, but then where it really stands out from the rest, if I can collapse, this is if you go into the plugin territory, this was the part that was, uh, in parts reserved to paid users, and now everything is completely free. So tools like scroll trigger or split Text or Draw SVG, uh, let you do mind blowing stuff. The flip UI animation is awesome. I'll probably do a separate RAB bit on just that plugin.
The flip UI animation is awesome. I'll probably do a separate RAB bit on just that plugin. Uh, lots of power under the hood. There's absolutely no way I can cover everything Gsap has to offer in this course. Actually, it would be its own course and that would be a pretty beefy course as well. You should check it out. Uh, just remember it's got a slightly bigger footprint and there's a lot to learn,
Uh, just remember it's got a slightly bigger footprint and there's a lot to learn, so it can be a little bit overwhelming, but if what you're trying to do goes beyond simple animation and you want really super impressive agency, award-winning type of websites, gsap is probably the way you want to go.
