Win a Free Class!

Join our email list for a chance to win

HTML5 Animation with GreenSock

Bring Your HTML5 Projects to Life

The GreenSock Animation Platform (GSAP) has become the industry standard for scripted animation due to its advanced features and incredible performance. It is used in the majority of award winning websites and it’s so popular in HTML5 banners that Google is hosting it for everyone to use. 

GSAP is the only solution that allows you to dynamically create and control robust animation sequences on the widest range of screens and devices. It is a JavaScript-based API that is literally 20x faster than jQuery under stress and offers many more features. Its features and performance will not only meet the needs of the most demanding professionals, but the syntax is totally beginner-friendly. You’ll be amazed at how easy and flexible it is to create animations with code.  

This class offers a comprehensive exploration of GSAP. Learn how it can bring powerful & engaging animation to your interactive projects.

Each student will receive a free 1-year Shockingly Green Club GreenSock membership ($99 value). Shockingly Green members receive GreenSock's premium plugins and tools including: MorphSVG, DrawSVG, SplitText, and more. Don't miss out on this chance to get the best training and best tools available.

Students should be comfortable hand-coding HTML and CSS and have working knowledge of basic JavaScript concepts (variables, functions, loops) as covered in our JavaScript and jQuery class.

If you can’t take this hands-on live class, there are two other options to learn: our step-by-step workbook, or our downloadable Video + eBook course

Upcoming Classes

Price: $650 Click for Discounts

  • 12 hours of Hands-On Training
  • Custom Written Workbook Included
  • Mac or PC
  • In New York City and Live Online

We Literally Wrote the Book!

Gsap v2

To make the perfect class we had to write our own workbooks which are included with each class.

Can’t take a class? Our workbooks are the next best thing.

Buy Workbook

What You’ll Learn

Section 1
Basic Tweening


  • Loading Scripts
  • Anatomy of a TweenLite Tween
  • The Method
  • Tweening Multiple Properties
  • Easing
Creating a Simple Sequence


  • The TweenLite.from() Method
  • Relative vs. Absolute Values
  • Pros and Cons of Sequencing with Delays
  • Animating 2D Transforms Scale and Rotation
Creating an Image Slider


  • jQuery’s $(document).ready() and .click() Functions
  • Triggering Tweens with Buttons
  • Tracking Code Changes in Chrome’s DevTools
  • Using Conditional Logic to Loop a Tween
Tween Control


  • Using set() to create a 0-duration Tween
  • Introducing the transformOrigin Special Property
  • Controlling the Direction of Rotation
  • Giving a Tween a var Reference
  • The play() and reverse() Methods

Section 2
Tween Methods and Callbacks


  • Getting and Setting Tween-Related Values
  • Event Callbacks
  • Changing the timeScale() of a Tween


  • Introduction to TweenMax
  • Only in TweenMax: repeat, repeatDelay and yoyo
  • Calbacks: onStart, onRepeat and onComplete
Staggered Animation in 3D


  • TweenMax’s staggerFrom() Method
  • Using transformPerspective to Animate in 3D
  • Using transformOrigin in a 3D Tween


  • Sequencing Tweens with TimelineLite
  • Adjusting Timing with the Position Parameter
  • Using Labels in a TimelineLite
  • Modifying an Ease with Config()
  • Seeking a Position Relative to a Label
  • Creating an Animated Progress Bar
Section 3
TimelineLite Control


  • Adding Play and Pause Buttons
  • Adding Reverse, Resume & Restart Buttons
  • Adding Timescale Buttons
  • Configuring a jQuery UI Slider
TimelineMax: Burger Boy Banner


  • Creating the TimelineMax & Animating the First Panel
  • Animating the Second Panel
  • Animating the Third Panel
  • TimelineMax’s repeat and repeatDelay
Promo: Starfield Particle Effects


  • Creating the Starfield Timeline Within a Function
  • Positioning the Stars
  • Using math.Random() to Enhance the Animation
Promo: SlowMo Ease


  • Intro to SlowMo Ease
  • Configuring linearRatio and power parameters
  • Using jQuery each() to Create Unique Tween Parameters
  • SlowMo yoyoMode
Section 4
Promo: Nested Timelines


  • Nesting Timelines within a Parent Timeline
  • Adding Individual Tweens to the Parent Timeline
  • Making Provisions for Connectivity Problems
Rocket Launch: TextPlugin


  • Enabling TextPlugin
  • Coding the Ready-Set-Go Countdown
  • Creating a Dramatic Animation for “GO!”
Rocket Launch: Special Eases


  • Animating the Rocket with RoughEase
  • Animated SpirteSheet Flames with SteppedEase
  • Fine-Tuning the Timing and Launching the Rocket
Board Member Biographies


  • Using GSAP’s ScrollTo Plugin
  • Precise Positioning with jQuery’s offset() Method
  • Adding Functionality to the Navigation Buttons
  • Tweening className with CSSPlugin

Why Train With Noble?

27 Years of Experience

Noble Desktop has been teaching computer graphics and web development since 1991. In all those years we have perfected the craft of teaching. If students get hung up on any issue, we tweak the class to make it work better. Every instructor uses the same time-tested curriculum we have developed. Ask around: Noble Desktop has a stellar reputation for exceptional computer graphics training.

Our Teaching Method is Better

We don't ask you to simply "follow along," copying what the instructor does. Instead we ask you to focus 100% attention on the lesson at hand. Only after the lesson do you then put into practice what you have learned by working on a computer with our step-by-step workbooks. This "learn, then practice" method results in the student learning and retaining much more than traditional "follow along" classes.

We Wrote the Book Ourselves

Most of our classes include a custom training workbook written by our top instructors. Take it home with you: with step-by-step exercises and power-user keyboard shortcut guides, it’s like having a refresher course right on your desk. We wrote the book ourselves because we couldn't find any book that was good enough. Now our books are being used by other schools and training centers worldwide.

We Provide Computers, Mac or PC

Since when did training centers expect you to "bring a laptop"? Noble Desktop has always had classrooms full of computers, Mac and PC. Each computer is loaded with software and has a 19-inch monitor. The next time you are asked to "bring a laptop," ask why you aren't being provided a computer. Noble Desktop always has up-to-date equipment in our state-of-the-art classrooms.

Not Just Anyone Can Teach

All our instructors are working professionals who bring on-the-job experience to the classroom. But we don't just let anyone teach a course. How many experts do you know who can't teach? We've learned to audition and test our instructors. Only after they have been through our screening process will they be put in front of students. And they are required to use our time-tested curriculum, assuring a positive learning experience for all our students. Read our instructor bios.

Money-Back Guarantee

We’re the only school to offer an unconditional money-back guarantee. If within the first half of the class you don’t absolutely love it, we’ll give you a full refund. Please note any request needs to be made before the halfway point of any class.

We Are NY State-Licensed, and Adobe Authorized

When looking at a computer training school, check to see if they are NY State-licensed. Any school in New York should be licensed by law. Noble Desktop follows state-issued guidelines for curriculum development and teacher licensing. Adobe Authorized means our instructors have passed the rigorous Adobe Certification Exam, and that we follow Adobe's quality-control standards.

Our Students Love Us! 2200+ Testimonials and Counting

We offer our guarantee because we think we’re the best—but don’t take our word for it. Ask more than 2200 industry professionals who have enjoyed our classes and are putting what they learned to use on the job. Read their testimonials.