Win a Free Class!

Join our email list for a chance to win

Course Workbook

HTML5 Animation with GreenSock

GreenSock Animation Platform (GSAP)

Gsap v3 2x
eBook $49
eBook + Videos $199
Print $65
Print + eBook $75
Teacher Discounts

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 book offers a comprehensive exploration of GSAP. Learn how it can bring powerful & engaging animation to your interactive projects.

You 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 book.

About the Video Course

The eBook + Video option is the next best thing to taking a live class. In each video, Carl Schooff of GreenSock will teach you about a topic. After watching each video, you can then do the corresponding exercise in the eBook. 

Here’s how the Videos and eBook work:

  1. You’ll download the videos (about 800MB), so you watch them at any time on your computer.
  2. You’ll also download the eBook, which contains the exercises you’ll go through after each video demonstration. You can download a PDF, EPUB, or MOBI file (whichever you prefer) so you can load the eBook onto a mobile phone, tablet, eReader, or even print the PDF.
  3. Launch the video course on your computer. It will open in a web browser, but does not require the internet to watch. Watch a video, ideally starting with the first.
  4. Go through the corresponding exercise in the eBook. It works best if you can see the eBook as you work through the exercises on your computer.

Includes Downloadable Class Files (works on Mac & PC)
ISBN: 978-1-934624-42-5

Download Sample Exercise
Setup & Introduction
Downloading the Class Files
What Is the GreenSock Animation Platform?
  • Introducing GSAP
  • The main components of GSAP
Before You Begin
  • Supported browsers
  • Recommended software
Section 1
Setting Up: Do This Before Other Exercises!
  • Setting up your class files
Basic Tweening
  • Loading scripts
  • Anatomy of a TweenLite tween
  • The TweenLite.to() method
  • Tweening multiple properties
  • Easing
Creating a Simple Sequence
  • The TweenLite.from() method
  • Relative vs. absolute values
  • Pros & cons of sequencing using delays
Creating an Image Slider
  • Using jQuery
  • jQuery’s $(document).ready() function & creating variable references
  • Using jQuery’s click() method to trigger a tween
  • Tracking code changes in Chrome’s DevTools
  • Using conditional logic to reset an animation
Tween Control
  • Using set() to change an element’s position
  • The transformOrigin property
  • Controlling the direction of rotation
  • Giving a tween a var reference
  • The play() & reverse() methods
Section 2
Tween Methods & Callbacks
  • Getting & setting tween-related values
  • Event callbacks
  • Changing a tween’s timeScale()
TweenMax
  • Introduction to TweenMax
  • Only in TweenMax: repeat, repeatDelay, & yoyo
  • Calbacks: onStart, onRepeat, & onComplete
Staggered Animation in 3D
  • TweenMax’s staggerFrom() method
  • Using transformPerspective to animate in 3D
  • Using transformOrigin in a 3D tween
TimelineLite
  • 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 & pause buttons
  • Adding reverse, resume, & restart buttons
  • Making an intelligent play button
  • 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
  • Integrating TimelineMax’s repeat & repeatDelay
Promo: Starfield
  • Creating the starfield timeline within a function
  • Using a for() loop to dynamically generate stars
  • Positioning the stars
  • Using Math.random() to enhance the animation
Promo: SlowMo Ease
  • Intro to the SlowMo ease
  • Configuring the linearRatio & power parameters
  • Staggered animation in timelines
  • SlowMo’s 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 & testing TextPlugin
  • Coding the Ready-Set-GO countdown
  • Creating a dramatic animation for “GO!”
Rocket Launch: Special Eases
  • Animating the rocket with RoughEase
  • Animating the flames with SteppedEase
  • Fine tuning the timing & launching the rocket
ScrollTo Plugin: Board Member Biographies
  • Using GSAP’s ScrollTo plugin
  • Adding functionality to the navigation buttons
  • Adding rollover effects using CSSPlugin’s className property
Bonus Material
Quote with SplitText
  • Club GreenSock
  • Downloading members-only Club GreenSock files
  • Using GSAP’s SplitText utility
  • Animating the quote
  • Animating the author’s name
  • The revert() method
Fancy Rollovers with TimelineLite
  • Using progress() to jump to the end of the animation
  • Tweening the clip property
  • Using mouseenter & mouseleave
  • Accounting for unexpected user interaction
Reference Material
ImmediateRender
CSSPlugin
GSAP FAQ
Features of Noble Desktop eBooks
  • Searchable.
  • Printable.
  • Live text that you can copy and paste.
  • eBook graphics are in color (printed books are black and white).
  • Widely compatible: We provide the most common eBook formats (EPUB, MOBI, & PDF) so you can load them onto the device or app you choose; such as Mac, PC, iPhone, iPad, Kindle, Android, and more.
  • Free updates for the edition you buy. When we make major changes to a book (requiring a new edition), an affordable upgrade option will be available.
  • DRM-free: Files are subtly watermarked with your name and email, but we do not restrict the devices or apps you can use to view our eBooks.
  • Lifetime access to downloads from your account page.
The Best Way to Enjoy Our Books

Our workbooks are meant to be used while you work on your computer. They typically contain step-by-step exercises that walk you through doing tasks on your computer. An ideal setup would be to have the eBook loaded onto a device (like a tablet/smartphone) or on a second computer monitor, so you can read the book as you work on your computer. You can also print the PDF if you prefer.

Which File Format Is Right for You?
PDF
  • Ideal for printing.
  • An exact match to the printed book. If the text reflow of an EPUB or MOBI file is confusing please refer to the PDF.
  • PDF is compatible with most devices, but it’s not optimized for small screens. If using a smaller screen you’ll likely want to use the EPUB or MOBI files.
EPUB
  • The industry standard eBook format which works with all devices, except for the Amazon Kindle. EPUB can be read on Mac, PC, iPhone, iPad, iPod Touch, Nook, Sony Reader, Kobo, Android, and many more.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
MOBI (Kindle)
  • Amazon’s format for Kindle devices and Kindle app.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
  • Using an iOS Device such as iPhone & iPad? The Kindle app for Apple iOS devices requires a specialized format which we do not support. While our MOBI will work in the Kindle app, it will not render well on iOS devices. We recommend using the EPUB format with Apple’s iBooks app if reading on an iOS device.
Recommended Reading Apps
iPhone, iPad
  • iBooks (EPUB)
Mac
Windows PC
Android
Can You Share the eBook or Printouts?

Noble Desktop books are intended for use by you, the owner. They are not intended to be loaned or given to others. The files are subtly watermarked with your name and email, but we do not apply any DRM. You can copy your eBooks to any of your own devices without restriction. You can print the PDF files for your own use, but not to give to others. You cannot sell used eBooks. Ownership is solely yours and cannot be transferred.

Teachers and training centers wishing to print copies for students should email for licensing options and pricing.

How It Works
  • When you buy an eBook for yourself, it will be added into your account. It will be watermarked with your information and is intended for use only by you.
  • You can also purchase eBooks for someone else, such as a friend or colleague. Schools and training centers can purchase eBooks for their students (be sure to apply for educational pricing).
  • When buying eBooks for someone else, you will receive an eBook voucher code to share with them. Send that code to the recipient and they will be able to redeem it. An eBook voucher code can be redeemed once, for the specific book you purchase for them.
  • The recipient of the eBook voucher code will need to log into their Noble Desktop account, or create a free account. In their account they will enter the code (in the My eBooks tab) and the eBook will be added immediately into their account.
  • The recipient receives all the same benefits of Noble Desktop eBooks, which includes lifetime access to download their eBook, as well as free updates to that edition. When the next edition is released, an affordable upgrade option will be available to them.

Examples of What You Learn

  • Learn how TweenLite tweens can be played, paused, reversed, and resumed.

  • Use TweenMax's powerful staggerFrom() method to enhance an animation.

  • Create a long, complex banner animation.

  • See how TimelineLite allows you to group multiple tweens together for easy sequencing.

  • Learn how to introduce interactive animation.

  • Enjoy using GSAP's plugins like ScrollTo and CSSPlugin.

Why Our Books Are Unique

Our books are packed with step-by-step exercises that walk you through projects. You’ll learn by doing exercises, not reading long explanations commonly found in user manuals. The goal is to give you hands-on practice with the program, getting you started quickly with the things that are most important for real life work. Our books are not a replacement for the manual, but manuals aren’t how you learn an app!

eBook $49
eBook + Videos $199
Print $65
Print + eBook $75
Teacher Discounts