Description
Course info
Rating
(26)
Level
Beginner
Updated
Apr 7, 2016
Duration
3h 12m
Description

Creating high-quality, animated JavaScript elements for gaming or other projects can be easy. In this course, JavaScript Animation with GSAP, you'll learn how all the benefits of animating with the Greensock Animation Platform (GSAP). First, you'll work on creating simple tweens, complex timeline animations, and apply dragging to any element. Next, you will discover how to animate CSS attributes. To wrap up the course, you will learn how to create an HTML game using GSAP to do all the animation. By the end of this course, you'll be able to use GSAP in conjunction with JavaScript to create awesome animations for games or other future projects.

About the author
About the author

Todd Shelton is a Front-End Web Developer making mobile/web applications. He is a lecturer at IUPUI's School of Informatics and Computing in Indianapolis, Indiana. He runs a successful user group called Dev Workshop, and hosts an annual conference in Indianapolis, IN called Dev Workshop Conf.

More from the author
Section Introduction Transcripts
Section Introduction Transcripts

GSAP Draggable
So in this module, we're going to talk about GreenSock's plugin called Draggable. Now one thing this does is allows us to put the ability to drag any kind of element on the DOM or in your HTML page if you want to call it that and let us drag it around the screen. And I think the best way to talk about this is actually just to view it. I'm going to jump over here to CodePen where I've created a very small demonstration of that. So here we are in CodePen, and as you can see, I just have 12 rods on the stage. And I wanted to be able to drag those around for a game. So by using the GreenSock's plugin Draggable, I'm able to grab any one of these rods and pull them around. And notice if I stack them on top of each other how the 7 is on top of the 11. Well, when I go and click on the 11, GreenSock has done a great job of allowing it to jump in front of the other element and let us move this around. That is what we're going to learn in this module, and I think you're going to find that it's very easy to implement and there's a lot of things that you can do with it. Let's go ahead and get started.