GreenSock Animation Classes NYC | Learn HTML Animation from the Official GSAP Training Partner

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.

Together with GreenSock, we developed this hands-on course, as well as a top-selling GSAP Workbook and GSAP Video Course

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.

NOTE: We are teaching an earlier version of the GSAP API (not the latest version 3). The instructor will mention some of the changes, and most of the concepts will still work even in the newer version (which simplifies some things).

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.

Highly Reviewed by Our Alumni

From our hands-on training style to world-class instructors and custom-crafted curriculum, we deliver results our alumni are proud of.

HTML5 Web Animation with GreenSock is rated 5.0 stars

in the past 24 months

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

Andrew Doser
YuMe

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

Ana Neagu

Schedule & Enrollment: HTML5 Web Animation with GreenSock

12 Hours
$650

Policies

NYC or Live Online
Free retake
Setup assistance
Expert instructors
Small classes

Dates & times are listed in

Not currently scheduled.

Email hello@nobledesktop.com to request this course, or see related courses with upcoming availability

See related courses

Tuition

As one of our smaller courses, tuition for this course is due in full before the start date. The best way to save on this course is to take it as part of a certificate program.

Full Tuition

$650
Due before the class starts

What’s Included

12 hours of hands-on instruction
Live, project-based training from experts
Proprietary workbook included
Retake for free within 1 year
Verified digital certificate of completion
Small class sizes

What’s included with my tuition?

A hands-on learning experience working on projects and exercises, which is proven to boost comprehension, retention, and engagement
Expert instructors who are industry professionals and experienced educators that are driven to help you succeed
Top-notch curricula that have been tried and tested over many cohorts and are consistently improved for an optimal learning experience
Supplemental materials to assist both during and after the course - please refer to specific course pages to see what supplemental materials are offered
A 1-year free retake policy which allows students to retake any part of the course or program for free to refresh the materials and gain additional practice
A certificate of completion to verify your accomplishment

Are there any additional fees or expenses?

There are no extra fees or taxes for our courses. The price you see on this page is the maximum you’ll pay us.

However, if you plan to take the course live online, you may need to obtain required software. We’ll help you get set up with a free trial of paid software prior to the class. Most of our coding classes utilize freely-available open-source software. For most of our design and motion graphics courses, we will help you get set up with a free trial of Adobe Creative Cloud. If you attend the course in-person, we will have a computer already set up for you with all of the required software for no additional cost.

Do you offer any discounts for this course?

We don’t currently offer discounts as we do our best to affordably prices our courses.

Take this course as part of a certificate program and save:

Web Animation Certificate

Price: $1,625 | Hours: 36 Hours

Learn the Skills Guarantee™

Learn the concepts and skills covered in this course or your tuition is on us. See details and terms & conditions.

Hands-on training

Work on projects proven to boost retention

Several students, sitting at computers, looking at the front of the classroom

Time-tested curriculum

Refined over many cohorts for an optimal learning experience

The teaching method at Noble Desktop is perfect and the classes provide you with infinite knowledge that makes you eager to take everything they offer. I love Noble!
—Ivonne Ackerman

Learn from experts

Experienced educators who are driven to help you succeed

Retake for free

Refresh the materials for free within one year

Interactive Training

Learn in Real-Time with Small Class Sizes

Attend this course in-person in NYC or Live Online via Zoom. Engage with expert instructors, ask questions, and get feedback on your exercises and projects.

Unlike other providers, these are not mass open-enrollment classes. At Noble Desktop, you’ll learn in small groups (typically 8-15 students) and receive personalized attention.

On Campus in NYC 185 Madison Ave, NYC

Get face-to-face interaction with an instructor and other students when you learn at our NYC campus. Courses are hands-on with a computer and software provided.

Live, interactive class
Experienced instructor in the room with you
Computer and software provided

More about our campus

Live Online Remote, from anywhere

Get the same interactivity and access to the instructor as in-person students. There are no extra fees and we’ll work with you to ensure your remote setup is perfect.

Live, interactive class
Experienced instructor teaching over Zoom
Remote setup assistance provided

More about live online training

photo of instructor leading a class in person

student taking a class live online, seated on their living room floor, leaning against a couch

Earn a Certificate of Completion

Upon completion of this course, you’ll receive an official certificate testifying to your mastery of the curriculum. We’ll send you a link where you can download your certificate, share it online with your friends, post it to your professional network on LinkedIn, and view all your earned certificates. Congratulations on your achievement!

Shareable on

Sample credential for completion of HTML5 Web Animation with GreenSock

Best-in-Class Course Materials

This course includes a detailed workbook, available in print or ebook at no additional cost.

Our proprietary workbooks are designed by a team of industry experts and instructional designers, and are updated regularly for the latest features and trends. Learn by completing a variety of real-world projects, and apply your newly-learned skills right away.

Download Sample Exercise

Demonstration of different book formats for HTML5 Animation with GreenSock: print, kindle, & mobile devicesfor

Free Retake & Class Recordings

Missed a session or need a refresher? We have you covered!

Free Retake

We offer a single free retake of the the class within a year.

Class Recordings

You can also access recordings of each session in your student portal within one business day of the session’s end. Recordings are available for one month after the session.

See terms and conditions.

HTML5 Web Animation with GreenSock Curriculum

What You’ll Learn at a Glance

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

Course Syllabus

Download Syllabus PDF

Section 1

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

TweenMax

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

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

Frequently Asked Questions

Do I need to bring anything to the class?

No. We provide computers (Mac or PC) with a coding editor installed. Choose your operating system at checkout.

Does this course require any prior knowledge or experience?

Students must be comfortable using a computer. No other prior knowledge is required.

Do you offer payment plans or student financing for this course?

This course does not qualify for payments plans or student financing. See our Payment Plan FAQ to find related programs that qualify.

Can I take this course online (remote learning)?

You may attend this training virtually (online) at the scheduled time the course is offered (New York, Eastern Time).

How does attending “live online” work?

Students can attend this training remotely through screen sharing software (we use Zoom).
Participants can hear the instruction, ask questions, and even share their screen with the instructor.
For audio you can use your computer’s microphone/speakers or call a phone number that we’ll provide.
Classes are activity-based and taught by a live instructor, so we strongly encourage students who are local to the area to attend in person!
You will need your own computer and copy of any required software. If you don’t have the software, you can usually do a free trial or purchase your own license. If you need assistance, contact us at hello@nobledesktop.com

What happens if I need to miss a session?

You have some options:

You can watch a recording of the session. We will provide any course materials.
If you can’t come into the classroom but can still attend remotely, we will provide you with the Zoom login information.
You can use your free retake to make up any missed class time.

Compare HTML5 Web Animation with GreenSock to Similar Courses

Select up to two courses and tap Compare selected courses to view a side-by-side comparison of HTML5 Web Animation with GreenSock with your selected courses.

Corporate & Onsite Training

Purchase group class vouchers at a discount for our regularly-scheduled group classes in NYC, or create a custom training program at your offices.

Private Training

Available onsite at your location
Modern computer labs available at our offices
Customize or choose from our existing courses
Free instructor consultations to finalize content

Group Class Vouchers

Send employees to our group classes
Extensive offerings and flexible scheduling
Simple billing and logistics
Computers and training resources provided

Installments
	10% non-refundable deposit
$650.00	Total You Pay