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 all 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.

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

Topics

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

Topics

  • 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

Topics

  • 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

Topics

  • 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

Topics

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

Topics

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

Topics

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

Topics

  • 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

Topics

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

Topics

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

Topics

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

Topics

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

Topics

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

Topics

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

Topics

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

Topics

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