Yelp Facebook LinkedIn YouTube Twitter Instagram

HTML5 Web Animation with GreenSock

HTML5 Animation Classes in NYC or Live Online

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.

Learn this powerful platform from the only official GreenSock training partner. Together with GreenSock, we developed this hands-on course, as well as a top-selling GSAP Workbook and Interactive GSAP Video Course

Animate Websites

Bring Your Websites, Ads & More to Life with GreenSock Animation

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

What is GSAP?

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.

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.

Prerequisites: 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.

  • 12 Hours
  • Mac or PC provided
  • Book included
  • Free retake

Register for a class

$650 Discounts Policies

594 Broadway, NYC or Live Online

What You’ll Learn

  • Create high-performance web animations with GreenSock (the industry standard for scripted animation)
  • Make your animations interactive with controls such as buttons and sliders
  • Use TimelineLite to sequence multiple tweens and adjust timing
View full syllabus

HTML5 Web Animation with GreenSock Class Syllabus

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

Hands-on GreenSock Training in NYC

This 12-hour class will teach you lucrative animation skills to make your websites stand out. Learn from a professional web designer in small classes with step-by-step exercises.

  • “Terrific exercises and very knowledgeable trainers. Even experienced GreenSock JS developers will learn new tricks from this course.”

    Andrew Doser

    Attended the HTML5 Animation with GreenSock course

  • “GSAP is an amazing class. I was really impressed how powerful is GSAP when building HTML5 banners for mobile devices.”

    Ana Neagu

    Learned web animation with GreenSock

Learn then Practice

In our HTML5 Animation with GreenSock class you’ll learn through projects. First by watching a short demo, then by practicing on actual websites and animating elements. Our instructors are all industry professionals who draw on their experience to teach you practical, professional skills.

Students learning to animate their websites

Custom GreenSock Workbook Included

Our GreenSock class comes with a custom step-by-step training manual sold to universities and schools around the world. Recreate the class projects and refresh the coding materials anytime after the class.

Each class comes with a custom GSAP workbook

Receive a Free Shockingly GreenClub GreenSock membership

You will receive a free 1-year Shockingly Green Club GreenSock membership ($99 value) with the class. Shockingly Green members receive GreenSock's premium plugins and tools including: MorphSVG, DrawSVG, SplitText, and more.

Instructor teaching students GreenSock animation skills

Register for HTML5 Web Animation with GreenSock

$650 Discounts Policies

594 Broadway, NYC or Live Online