GreenSock 101

Are you ready to start learning the basics of GreenSock 3 and ScrollTrigger?

Learn the basics of GreenSock API and web animations in 60 minutes!

Jonathan

Perfect. It has recently been updated with the new GSAP3 and ScrollTrigger.

5 stars

Jonathan
Peter Carrero

This is an excellent course! I went from nothing to being able to easily incorporate very polished UI animations on my daily work in no time.

5 stars

Peter Carrero
Donald Westland

Nice lesson, learned a lot. Looking forward to seeing your additional courses.

5 stars

Donald Westland

Watch The Course Preview

Find out exactly what you will build inside of the course.

Course Information

Is this for you?

  • Total class duration: 1h 30min
  • Video files not available for download.
  • Learn at your own pace.

Objectives

What will you learn?

  • GSAP 3 API – tween, timeline, controls, positioning
  • ScrollTrigger – basics, pin, class toggle, parallax effect and more
  • No need to have GSAP membership to enjoy this workshop.

Prerequisites

What do you need before start?

  • Basic JavaScript knowledge is welcome, but not necessary.
  • Working knowledge of HTML5 and CSS3.
  • A genuine interest in GreenSock and JavaScript animations.

Table of Content

HD videos uncovering the basics of GreenSock!

Module 1 GSAP3
Unit 1 G101 - Installation - 5:43
Unit 2 G101 - To and From Tweens - 8:11
Unit 3 G101 - From and Set Tweens - 2:57
Unit 4 G101 - Timelines - 11:24
Unit 5 G101 - Controls and Callbacks - 8:34
Unit 6 G101 - Greensock Snippets - 3:20
Module 2 ScrollTrigger
Unit 1 GS101 – 01 – ScrollTrigger Basics – 9:08
Unit 2 GS101 – 02 – toggleClass – 5:11
Unit 3 GS101 – 03 – Simple parallax effect – 7:04
Unit 4 GS 101 - 04 - Simple pin effect - 5:06
Unit 5 GS101 - 05 - Toggle Actions - 6:10
Unit 6 GS 101- 06 - Callback functions - 3:49
Signup Now!

Free forever, Instant Access

Have a few questions? No worries.

Can I download the videos and watch them offline?

No, video files are not available for downloads. You need to be online and logged in to my site to be able to follow this course.

Do I need GreenSock Club membership?

No, you don’t need the paid GreenSock club membership. We will only cover the core GSAP tools and ScrollTrigger.

Why should I learn GreenSock instead of CSS animations?

CSS animations are great, but to accomplish more advanced interactive animations like you have seen on so many award winning websites, you need a tool that lets you focus on your creative idea. Learning GreenSock will help you to get things done much faster and without a lot of headaches.

What software do I need to complete the workshop?

All you need is a code editor (I am using VSCode). You can download the starting files and follow me step-by-step from start to finish of each project.

I have another question!

For any other questions use the Get In Touch form or hit me up on Twitter @ihatetomatoes.

Do you want to master JavaScript animations?

Here is what others think
about the GreenSock 101.

5 stars
By Carlos K

This course is a great intro to GSAP library. Bitesize videos, easily digestible, and up to the point. The scrollTrigger addon was a great update to the tutorial. Well done Petr!

5 stars
By Jonathan Martínez Manzano

The course is perfect, it has recently been updated with the new gsap3 updates and scrolltrigger.

Explains the concepts very clearly and in a very simple way, so that it can be understood without problem.

5 stars
By Antonella Perna

This is a course that literally takes you from the basics of animating HTML elements using the popular GreenSock library and logically progresses to more complex examples.

Petr is an outstanding teacher – his videos are clear and easy to follow and the quality is excellent.

If you love animation on the web and you’re looking for a place to start, don’t miss this course.

Strongly recommended.

5 stars
By Tori Tan

Really enjoyed learning this course, especially its totally precise and succinct style with… nice pacing. just an hour but packed with tons of great information. not too basic at all. bravo!

5 stars
By Jason Dy

I’ve been searching how to use greensock and this course has all the answers and really takes your animation skills to the next level. Highly recommended!

5 stars
By Dave Clark

A little fast for me and I think it might be easier for me and beginners if the demo files were less sophisticated: they have a lot in them which doesn’t seem to relate to the task at hand – they are more like files you might publish. I am just questioning whether this degree of setup is necessary to teach what you are teaching.
I don’t want to sound negative though, I have got a lot from your tutorials and tips, so thanks very much!
Dave Clark

5 stars
By Merf Schultz

I have been interested in learning GreenSock animation for a little time now. This is a great introductory course to GreenSock animation. It’s very easy to follow along for those who already have a familiarity with jQuery and JavaScript, like myself, or those new to it altogether.

It’s pretty amazing the complex animations GreenSock can handle with just a few lines of code. I look forward to learning GreenSock more in depth and using it as my primary source for web animation, when CSS3 doesn’t do the trick.

I highly recommend this course to those new to web animation or those who are experienced in animation looking to broaden his or her horizons with GreenSock.

5 stars
By Gopikrishnan H

Thanks, Petr Tichy, the lessons are really helpful. I had been searching everywhere to get start in GSAP and found this one is top of everything else. Looking forward much more like this from you.

5 stars
By Cardozo Hernandez

Thanks, Petr Tichy, really enjoyed learning this course, the lessons are really helpful.

5 stars
By Risky Maru

I’ve learn new things, thanks a lot. Good Tutorial, very useful

5 stars
By Natalia Dushkina

I tried GSAP a long ago but I’ve forgotten almost everything. I think this course is definitely good not only for beginners but also for those who needs a quick remind of what GSAP is able to do.a


Made by Petr Tichy
Now that you are at the bottom of the page, why not to do some clicking instead of scrolling and reading?