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

Next lesson playing in 5 seconds

Cancel

Free Preview: GreenSock Animation Platform: First Steps

Introduction

00:41
  • Overview
  • Transcript

GreenSock is a JavaScript framework which makes it easy to animate HTML elements. During this course, you will take your first steps in learning how to use this powerful framework. As long as you have an understanding of HTML and CSS, along with a basic knowledge of JavaScript, you’ll be equipped with everything you need to follow along.

Build on your knowledge of GreenSock and follow this course up with one of these more advanced courses:

1. Introduction

1.1 Introduction

Hello and welcome to GreenSock Animation Platform. First Steps. My name is Craig Campbell and I will be your instructor for this course. In this video series, you will be introduced to a very powerful Javascript platform that allows you create complex, interactive animations with the ease and convenience of the JavaScript language. As long as you understand HTML and CSS. And as long as you have a basic knowledge of the JavaScript language, you should be able to jump into this course. With no problem. So, I want to personally thank you for checking out this course and in the next video we'll get started.

1.2 What Is the GreenSock Animation Platform?

Hello, and welcome back to GreenSock Animation Platform, First Steps. In this lesson, we're gonna take a look at the GreenSock website as we talk more in depth about what GreenSock is. More specifically, we're gonna take a look at the GreenSock Animation Platform or GSAP, and you can find more information about that on the GreenSock website at GreenSock.com. And if we go to the Product's navigation, we'll get a drop down and I'm gonna click on GSAP underneath HTML5/JS. We're gonna use the JavaScript version here, not the flash version which you can find a little bit further down that drop down menu. So I'm gonna click on GSAP again underneath HTML5, and that will take us to a page with more information. So on this new page we still don't really get an idea of what the GSAP is until we scroll down quite a bit to this section that says, what is GSAP? So the GSAP is basically a JavaScript framework that we're gonna use to animate items on our stage. And the GreenSock Animation Platform is composed of four main elements here. We have TweenLite, TweenMax, TimelineLite and TimelineMax, as you can imagine the TweenLite and TweenMax are very similar and the TimelineLite and TimelineMax are very similar. The lite version is gonna be a more lightweight version designed to run fast and run very smoothly. The max version is gonna be more of an extension the lite version, so it's gonna have all the functionality of the lite version, but it's gonna have a lot more included with it. It'll give us a lot more features such as the ability to create repeating animations and delays and things like that. So don't think of the lite and max version as a free and premium version because they're all free to use. But the lite version is the lightweight fast version and the max version is the one with all the features, all the extra features. So it might not run as smoothly as TweenLite but it actually still runs really smoothly. So those are the four main components of the GreenSock animation platform, and you can click on any of those components to get more information about it. So here's the TweenLite example, and you'll see that they're using Codepen here, which is exactly what we're gonna be using in this course to type out our code. But it gives you good examples of what it is and how it's used. And if we go back up to the top under Support, you'll see that there's a link to full documentation. And this documentation includes everything you need to know for TweenLite, TweenMax, TimelineLite, and TimelineMax. Now, one thing we need understand is how TweenLite and TimelineLite work together. The TweenLite or TweenMax components of GreenSock Animation Platform are designed for animating something. So we might have an object on the stage that's going to animate, let's say we have an icon in a menu that's gonna flip over or animate in some way when we hover over it, we're gonna use either TweenLite or TweenMax to create that animation. Now the TimelineLite and TimelineMax components are designed as containers for multiple animations. So if you have multiple tweens that you need to organize in a certain way, maybe you're gonna have some staggering affects where you have some animations occurring and after a couple seconds more animations are gonna jump in, you're gonna use your TimelineLite and TimelineMax components in order to organize those and manage those animations on the timeline. And you can even nest timelines inside of timelines for really complex animations. But those were the main features of the GreenSock animation platform and as we move forward through the course, we're gonna learn a lot about how to use each of those components. So thank you for watching, and we'll get started in the next lesson.