Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel

Free Preview: Advanced Animation With GSAP Plugins

Introduction

00:35
  • Overview
  • Transcript

The GreenSock Animation Platform is a powerful JavaScript library for animating HTML elements in the browser. In this course, you will go beyond the basics of GreenSock animation as Envato Tuts+ instructor Craig Campbell takes you on a tour of the plugins that ship with GSAP.

If you haven't used GreenSock before, or want to get some practical experience, check out these GreenSock courses:

1.Introduction
2 lessons, 03:33

Free Lesson
1.1
Introduction
00:35

Free Lesson
1.2
The Plugins
02:58

2.Animating HTML Attributes With AttrPlugin
4 lessons, 33:09

2.1
Quick Review
06:32

2.2
Tweening SVG Shapes
08:13

2.3
Setting Up Your SVG
09:46

2.4
Tweening Attributes
08:38

3.Animating on a Curve With the Bezier Plugin
3 lessons, 27:48

3.1
Animating in a Circle
14:27

3.2
Bezier Properties
07:00

3.3
More Curves
06:21

4.Animating JavaScript Color Properties
2 lessons, 20:27

4.1
Tweening Properties
10:11

4.2
Animating a Gradient
10:16

5.Animating Text Changes With TextPlugin
1 lesson, 08:02

5.1
Animating Text
08:02

6.Animating CSS Rules
2 lessons, 16:47

6.1
Starting From Scratch
06:58

6.2
Animating the Rule
09:49

7.Directional Rotation
3 lessons, 30:20

7.1
Directional Rotation Basics
10:32

7.2
Random Rotation
08:19

7.3
Return on Hover
11:29

8.Conclusion
1 lesson, 00:42

8.1
Final Thoughts
00:42


1. Introduction

1.1 Introduction

Hello and welcome to advanced animation with GSAP plugins. My name is Craig Campbell and I'm going to be your instructor for this course. The GreenSock platform is a very powerful platform for creating high performance animations in JavaScript and in this course we're going to take a look at some free plugins that ship with the GreenSock platform, and we're going to take a look at how to create some really nice, really advanced, animation using these plugins. So once again, I want to thank you so much for watching and we'll get started in the next lesson.

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.