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 training 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:
- You’ll download the videos (about 800MB), so you watch them at any time on your computer.
- 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.
- 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.
- 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
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
Examples of What You Learn
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. 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.
