- Overview
- Transcript
1.2 The Plugins
In this lesson, we’ll take a look at the GreenSock website, giving you a preview of the plugins we will be working with. All of the plugins discussed in this course can be found in the default GreenSock zip file that you download from the website.
Related Links
1.Introduction2 lessons, 03:33
1.1Introduction00:35
1.2The Plugins02:58
2.Animating HTML Attributes With AttrPlugin4 lessons, 33:09
2.1Quick Review06:32
2.2Tweening SVG Shapes08:13
2.3Setting Up Your SVG09:46
2.4Tweening Attributes08:38
3.Animating on a Curve With the Bezier Plugin3 lessons, 27:48
3.1Animating in a Circle14:27
3.2Bezier Properties07:00
3.3More Curves06:21
4.Animating JavaScript Color Properties2 lessons, 20:27
4.1Tweening Properties10:11
4.2Animating a Gradient10:16
5.Animating Text Changes With TextPlugin1 lesson, 08:02
5.1Animating Text08:02
6.Animating CSS Rules2 lessons, 16:47
6.1Starting From Scratch06:58
6.2Animating the Rule09:49
7.Directional Rotation3 lessons, 30:20
7.1Directional Rotation Basics10:32
7.2Random Rotation08:19
7.3Return on Hover11:29
8.Conclusion1 lesson, 00:42
8.1Final Thoughts00:42
1.2 The Plugins
Hello and welcome back to advanced animation with GSAP plugins. In this lesson, I wanna take a quick look at the GreenSock website as we talk about some of the plugins that we're going to be exploring in this course. So you can get to the GreenSock website at greensock.com and the page I want to draw your attention to is under Support and Docs and we'll click on that. And this will take you to the documentation for the GreenSock platform as a whole. So you'll see that we have different topics here. We have GSAP as a whole and if we click on that, it will show us TweenLike, TweenMax, TimelyLight and TimelineMax, which are kind of the core libraries here for creating animations using the GreenSock platform. So if you're not familiar with these then it would highly behoove you to check out the introductory GSAP course that is offered by tuts+. Because I'm not gonna be going over the basics, I'll do a little bit of review but we're not gonna go in-depth over the basics of using GreenSock. So let's jump backwards here, go back to the main GreenSock documentation page. And what I wanna focus on is this plugins section here. So this will list out all of the plugins, whether they're premium plugins or the regular free plugins that ship with GreenSock. It will list all of them here. So we're gonna be working through a bunch of these plugins including the AttrPlugin which allows us to animate HTML attributes. We have the BezierPlugIn which allows us to animate objects along a Bezier curve, which is really cool. The color props plugin, we're gonna be taking a look at. There's a lot of these plugins that we're gonna look at throughout this particular course. And each one of these provides us some really nice functionality for creating some really customized animations. So you can click on any of these plugins here to get more information about how it's used. But this documentation, if you've never used something like this before, it's a little bit helpful but it doesn't always get you exactly where you need to go and that's where this course comes into play. So hopefully this course will fill in the gaps that this documentation might leave for you whenever you're trying to figure out, not only how to use these plugins, but some creative ways that we can use them to create some really nice animations on our websites. So I want to encourage you to get familiar with this documentation page. Whether you're using the plugins or not, these documentation pages are really, really helpful in helping you understand the GreenSock platform. So once again, you can find those at greensock.com. Just go to the Support menu, go down to Docs, and again, that will take you to the documentation. So thank you for watching, and in the next lesson we'll get started using some of these really powerful plugins.