GreenSock Workshop

Overwhelmed by GreenSock? Don't Know Where to Start?

Learn how to animate like a pro with GreenSock.

Simon Vrachliotis

This GreenSock workshop is packed with great pro tips, it will take your GSAP chops to the next level!

5 stars

Simon Vrachliotis
Jaroslav Horak

It is like snowball effect. Each Petr’s course builds a bigger knowledge base.

5 stars

Jaroslav Horak
Jim Thornton

There’s just a lot of learning packed into each project. GreenSock is the future.

5 stars

Jim Thornton

Watch The Course Preview

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

Join other 9086 happy designers and developers, sign up today!

Why GreenSock Workshop?

Are you tired of copy-pasting snippets of code and not being in full control of your animations?

If you’re a developer who eagerly wants to learn how to master the fascinating animation platform, GreenSock – and thereby become the web animation superstar you secretly fantasize about being – then listen to this…

My name is Petr Tichy (@ihatetomatoes), and I’m a professional developer – just like you. I’m not a professional ad writer, so please bear with me.

Petr Tichy

All I did was figure out a way to EASILY TEACH GreenSock to you – via an online course that I invite you to sign up for right now if you want to get virtually ALL your GreenSock questions answered!

I guess it’s my teaching style. People say I’m very easy to learn from.

In fact, a previous courses of mine (on parallax scrolling) got REAL POPULAR, real fast.

The word spread, and soon I had over 1,000 students!

They were very happy. The most common review said, “This course was 100% worth it. Highly recommended. I kick myself for not taking it sooner.”

Are you a pro, or just getting started with JavaScript, jQuery, GSAP and SVG animations? It doesn’t matter.

My course is perfect for beginners – because I don’t “assume” you already know a bunch of stuff. Therefore, you won’t be frustrated while watching my videos.

You’ll be able to pick up on everything, right from the start, and speak the same language as everyone else.

What You’ll Get

  • Total class duration: 08h 24min
  • One-off payment, with lifetime access.
  • Video files not available for download.
  • Learn at your own pace.

What’s covered?

  • GreenSock TweenMax, CSSRulePlugin and TextPlugin.
  • That’s it!
  • All 3 projects are only using these free GSAP plugins.
  • No need to have GSAP membership to enjoy this workshop.

About the Author

Petr Tichy (@ihatetomatoes) is a passionate front-end developer, blogger and YouTuber.

He loves teaching all he knows about modern web development and animations on the web.

Are you a pro or just getting started?

It doesn't matter!

If you’re a pro, you’ll “brush up” on things you’ve forgotten.

But anyone who knows their way around HTML, CSS and has a basic jQuery knowledge will be fine.

But, in the more than EIGHT HOURS of premium GreenSock tutorials you get as part of my course, I will teach you how to create modern and attractive animations (using GreenSock) that will BLOW YOU AWAY.

Your clients will be so impressed. Or your employer. But you will definitely impress yourself, too.

I’ll have you building THREE projects, from start to finish – step by step – as part of this hands-on learning process.

It guarantees that you get the “mastery” level you’re seeking.

GreenSock Tutorials

You’ll be able to enhance your skills, keep up with the latest trends, and discover what’s HOT!

I just love it! This is much better than lynda.com tutorials.

5 starsAna Neagu

I’ve never had such a positive experience with any online class, at any price.

5 starsTim Randall

Worth every penny.

5 starsDaniel Ryan

You have nothing to lose!

Except all your GreenSock and SVG animation frustrations.

Sign up now to get started! And remember…

You’re protected by my 100% Money-Back Guarantee of Satisfaction!

You have nothing to lose – except all your GreenSock and SVG animation frustrations!

GreenSock Tutorials Review

Now you can LEARN and EARN… instead of being forever overwhelmed by the complexity of it all.

Let me walk you through GreenSock, step-by-step, like I’m well-known for.

You’ll be one of my new fans. I promise.

Let me walk you through GreenSock, step-by-step, like I’m well-known for.

Intended Audience

Is this for you?

  • Anyone with a working knowledge of HTML and CSS.
  • Anyone with little or no jQuery/JavaScript experience.
  • Curious front-end developers trying to learn what’s hot and boost their skill set.
  • Designers who would love to build their own animations.
  • Anyone looking for a more advanced GreenSock tutorials.

Objectives

What will you learn?

  • Explain GSAP API in simple step by step demos.
  • We’ll use jQuery for selecting elements and other user interactions.
  • Build 3 larger projects from start to finish.
  • Learn how to create a more advanced animations.
  • Learn by doing, follow Petr step by step, line by line.

Prerequisites

What do you need before start?

  • All working files are available for download.
  • Illustrator files and exported SVGs are also included, no need to have Illustrator installed to complete this workshop.
  • Positive attitude towards learning new techniques.
  • A genuine interest in GreenSock and JavaScript animations.
  • Tomato lovers more than welcome!

Table of Content

23 HD videos uncovering the power of GreenSock!

Projects Gallery

Module 1 Projects Gallery – 02:32:35
Learn how to create an interactive Projects Gallery using GreenSock TweenMax.js.
Unit 1 Template HTML, CSS – 46:31  
Unit 2 GSAP Animation – 45:43  
Unit 3 GSAP Nesting Timelines – 16:33  
Unit 4 GSAP Multiple Timelines – 16:28  
Unit 5 GSAP Pause and Resume Timeline – 31:41  
Unit 6 GSAP Rotating Circles Exercise – 12:07  

Fullscreen Slideshow

Module 1 Fullscreen Slideshow – 01:40:11
Learn how to create an interactive Fullscreen Slideshow using GreenSock TweenMax.js.
Unit 1 Template HTML, CSS – 27:13  
Unit 2 Creating Our Navigation – 18:59  
Unit 3 Going To The Next Slide – tlDown – 17:20  
Unit 4 Highlight Current Slide – setActiveSection – 12:38  
Unit 5 Going To The Previous Slide – tlUp – 13:20  
Unit 6 Horizontal Slideshow – Your Exercise – 04:11  
Unit 7 Gallery Slideshow – Your Exercise – 19:50  

Fullscreen Slideshow

Module 1 SVG Lab – 04:12:04
Learn how to export, optimize and animate SVGs using GreenSock TweenMax.js.
Unit 1 SVG Lab – HTML, CSS – 19:50  
Unit 2 SVG Lab – Clear Stage – 33:46  
Unit 3 SVG Lab – Clear Stage Exercise – 23:09  
Unit 4 SVG Lab – Intro Timeline – 39:35  
Unit 5 SVG Lab – Idea Timeline – 30:49  
Unit 6 SVG Lab – Part 2 Timeline – 15:04  
Unit 7 SVG Lab – Fill Tubes Timeline – 31:16  
Unit 8 SVG Lab – Fill Tubes Exercise – 12:12  
Unit 9 SVG Lab – Fill Flasks Exercise – 15:22  
Unit 10 SVG Lab – Final Animation – 27:44  

The best course I’ve ever done!

5 starsMartin Milizia

Petr Tichy - Ihatetomatoes.net

I have been using GreenSock on my interactive projects for several years now. To be able to focus on the creative coding instead of cross-browser issues is priceless.

GreenSock

GreenSock is ultra high-performance, professional-grade animation platform for the modern web used on more than 65% of award winning websites.

100% Money Back Guarantee

Watch the first 5 course videos and if you are not completely satisfied, you can enjoy my 14 days 100% money back guarantee. Simply contact me for a prompt refund.

Did you know that 65% of award winning websites are using GreenSock?

Course Packages

Select your package.

GreenSock Workshop

Learn GreenSock animations.

$137

$97

  • Lifetime access
  • 8.5hrs of HD GreenSock Tutorials
  • Stream from any device
  •  

Most Popular

GreenSock Combo

Master GreenSock and ScrollMagic.

$194

$167

Go to Combo

  • Lifetime access
  • Access to GreenSock Workshop
  • Access to ScrollMagic Workshop
  •  

Animation Combo

All my courses in one package.

$328

$197

Go to Combo

  • Lifetime access
  • Access to GreenSock Combo
  • Access to Skrollr Combo
  • VIP discount on my future courses

GreenSock Workshop

$97.00

All prices in USD

Learn how to animate like a pro with GreenSock.

Price in USD, One-Off Payment, 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.a

Do I need GreenSock Club membership?

No, you don’t need the paid GreenSock club membership. We will only cover the free GreenSock tools such as TweenLite, TweenMax, TimelineLite and TimelineMax.

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 Sublime Text). You can download the starting files and follow me step-by-step from start to finish of each project. SVG files are also available for download. You do not need to have Illustrator installed.

What if I sign up and find out it's not for me?

You are covered by my 14 days money back guarantee. If you are not thrilled after watching the first 5 videos, you can enjoy my 100% money back guarantee. Simply contact me for prompt refund of the full purchase price.

I have already completed the free GreenSock 101, why should I upgrade?

In GreenSock 101 we have only scratched the surface. There is much more you can do with GreenSock. By building 3 interactive projects from start to finish you will take you JavaScript animation skills to the next level.

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

5 stars
By Gerard Eley

The Greensock Workshop is an excellent series of tutorials that bring together aspects of HTML, CSS, Greensock and jQuery in a coherent and manageable way.

As well as teaching the methodology of Greensock Petr also exposes the learner to general good practices with the other languages.

5 stars
By Nils Deharde

Its a very awesome tutorial.

My English isn’t the best but i’m able to follow and i can understand u good
clearly explained.

I’m happy to spend my money with it. That’s i was looking for to improve my
skills.

Thanks dude

5 stars
By Rosa Choi

This is so much fun! I’ve been wanting to learn GSAP for some time but haven’t really found a perfect tutorial until now.

Petr is really awesome and knows how to explain difficult animation timeline in step by step approach. I just love it!

5 stars
By Martin Milizia

Petr thanks! Great course, simple to learn, your step by step approach is very functional.

It isn’t only a tutorial, it’s a full immersion in the working method of an amazing front-end designer!

The best course I’ve ever done!

5 stars
By Marina Castro

In the first module, Petr set up the initial files for the workshop (html, css) in a very clear and easy to follow step by step way.

I personally like:

  • his code style,
  • his tips for using toolkits like emmet that saves you lot of time allowing you to be more productive.
  • CSS comments
  • and that he types the code line by line while he explains it, giving you time to code at the same time and learn by doing.

It has definitely met my expectations and I would highly recommend it to anyone who is looking for a shortcut to learn GreenSock.

5 stars
By Ana Neagu

This an awesome tutorial, Petr is really an expert and knows how to explain and present this GSAP Workshop. I just love it! This is much better than Lynda.com tutorials.

5 stars
By Jacob Gibellini

I remember looking into GreenSock in my own time and watching plenty of tutorials on YouTube to grasp a better understanding on how to write it effectively.

I even created a few websites that contained GreenSock SVG animations, but even then, I knew that my code I was writing wasn’t acceptable as I was getting overwhelmed by it.

After watching Petr’s GreenSock Workshop videos, and getting a much better understanding on how to effectively create GreenSock animations, I went from a little overwhelmed, to very confident.

This GreenSock Workshop was by far one of the most well planned, cleverly structured and visually represented tutorial I’ve seen out of all videos I have watched on GreenSock tutorials.

The quality of this workshop was superb.

It was very easy to understand Petr as he was clear with his words, and the videos were displayed in HD.

They were extremely informative. Explaining every part of the code to the smallest detail or finding better solutions on coding GreenSock to get the best performance.

One thing that surprised me was the use of sublime packages such as Emmet or Hayaku which I never knew existed until now.

I coded the projects while watching the tutorials on a separate screen and never had to pause the video from misunderstanding Petr expain something as he timed everything perfectly.

I would recommend Petr’s GreenSock Workshop to anyone who would be interested in front-end web development/design.

You will gain the necessary skill set for writing clean and silky smooth GreenSock animations!

5 stars
By Simon Vrachliotis

The GreenSock workshop is packed with great pro tips – it really allowed me to take my GSAP skills to the next level.

Before taking the workshop, I was already able to do simple animations with GSAP. I could do fun, basic stuff, but I now feel confident to use the GreenSock library and plugins in ambitious client projects.

Petr does an excellent job at setting up the stage with explaining the HTML / CSS structure first – but allow users to skip straight to the GreenSock part if they want. This makes sure everyone can follow along, regardless of their skill level.

You might feel a bit overwhelmed watching the first video about the GSAP implementation. If you do, be sure to check out the ‘Introduction to GSAP’ video linked in the workshop notes – that will give you a quick understanding of the GSAP syntax and API.

Once you got that – no one can stop you: this workshop will take your GSAP chops to the next level!

A well deserved 5 stars to this amazing workshop – I highly recommend it to anyone who wants to become fluent with GSAP and add solid web animation skills to their workflow.

Thank you Petr for all the hard work put into this. It is very clear you paid attention to the smallest details, and the final result is a very compelling series of screencasts for a large range of front end developers.

Going forward, I could not consider a workflow without using GreenSock. Be warned, it’s extremely addictive!

5 stars
By Antonella Perna

I find web animations done right among the coolest stuff on the Internet.

As front-end developer, I’m fascinated by what lies behind the scenes – the CSS code and the JavaScript programming. It takes quite a lot of sophisticated and involved front-end code to create a smooth, high-performance bit of animated web content.

Luckily, it doesn’t have to be intimidating: thanks to tools like the GreenSock Animation Platform (GSAP) and the right step-by-step guidance, like the GreenSock Workshop by Petr Tichy (the same guy behind the Parallax Scrolling Master Class and the Skrollr Workshop).

In his hands-on and clear teaching style, Petr walks you through the creation of advanced, state of the art animated web design projects, detailing each step from setting up the HTML and CSS documents all the way to applying GreenSock’s methods.

Modules follow in a logical sequence, each building on the previous one. Also, each lesson is accompanied by two sets of downloadable project files: the starting files and the completed lesson’s files. This way you’re free to follow along with the tutorial video, but also have the chance to check your finished work against the original files, which is a distinctive feature of Petr’s previous courses that I personally find amazingly helpful.

As the icing on the cake, at the end of each project, you’ll get to work on a practice exercise to validate and sharpen your newly gained skills.

In my race to constant skills upgrade all too familiar by developers, I was looking for a fast-track, comprehensive, yet approachable course that would set me on my way to creating cutting-edge, high-performance JavaScript-powered web animations. This is it.

I warmly recommend the GreenSock Workshop to all developers who strive for perfection in mastering the latest technologies and are passionate about interactive, seamless web animation effects that won’t make site visitors cringe.

5 stars
By Caprica

Thanks Petr for the great videos.
First time GSAP user & have Just finished the first Project and can definitely say that I can apply the library in some of my front-end projects spicing it up with elegant animations.

Very consistent, logical and easy way to follow. For someone like me used to mainly frameworks and css animations, as well as some Flash basic timeline knowledge, I can now have more control and provide better interactive results, thanks to the simplistic way of going through the timelines and thorough explanation in the videos.

Referencing the GSAP doc was just a spot-on & it seems to be very easy to follow with loads of examples. Greensock really is the most sophisticated library I’ve had the chance to work on so far.

Very well done and well worth every single penny of those videos.

Thanks Petr & keep up the great work!

5 stars
By Dwayne Neckles

Petr you made an excellent product.

See, in the GS forums I’ve always asked that someone produce more advanced tutorials that at the very least show how other developers use it. Kind of like a Masters of Flash book for GreenSock.

This is a great compliment to your deconstruction series.

You will gain insight into his workflow. Ironically the most INFORMATIVE part of his tutorials is when he is setting up his HTML/CSS for four years that really eluded me… So this was exactly what I was hoping for.

And then of course his greensock… Even though I was skeptical that I would not learn anything new, I was blown away.

I learned a lot of new things I hadn’t known before. So, for the people, if you are a beginner this may be a bit tricky for you to get now.

But, they have a bunch of resources for beginners out. Then come back to this course. For the intermediate skill level, I would suggest that you watch this at least twice to let it really soak in. Spend the money its worth it.

I hope he comes out with more, I would buy again.

Oh and one more thing, the only small thing is that I did not use his SVG tips right away it is a lot of work right now.. but when I get the other stuff now, I will learn the SVG…in depth

5 stars
By Daniel Ryan

GSAP is pretty intimidating when you first start out.

Having a set of step by step tutorials has been invaluable for helping me figure out the timeline.

I’ve also gained from watching Petr’s general workflow.

Worth every penny.

Would be great to see a ScrollMagic course.

5 stars
By Jim Thornton

I’ve spent about 100 hours on a GSAP side project over the last year, sort of spinning my wheels and adding about 300 animations to one timeline.

Petr’s Greensock course made web animation and control over the process of timelines accessible to me.

There’s a lot of repetition built in, and everything is learning by doing with resources and docs pointed out if you need to better understand something.

I had trouble keeping up on how things were organized in the first project.

By the second project things started to click about how to organize timelines, sync up animations, handle common issues animating SVGs, debugging syntax errors, realize where my weaknesses were.

And then the third project, which is most along the lines of projects I want to get into, was really helpful because it gets into fine tuning of animation, and you sort of learn whats involved with moving things along paths, repeating animations within the larger context of linked animation timelines, staggering, vibrating, flickering things.

There’s just a lot of learning packed into each project.

If you want to learn web animation, gsap is the future and if you want to learn it quickly, get Petr’s gsap tutorial and read his posts on gsap.

5 stars
By Tim Randall

Fantastic course.

Far better than any I’ve taken from any of the big online schools.

If you could provide a searchable transcript, it would make a great reference for us beginners. Maybe you could do a similar class on the Unity engine?

Please keep making courses.

I came into this pretty good at HTML and CSS, but still a novice with JavaScript, and with no experience in jQuery.

Most of the time the explanation in the course of the js and jQuery is adequate even for me. I have rarely had to google some item to get more explanation.

The attention to detail makes this course a pleasure.

Other training sites usually have a few errors in their demo files, which can be a huge time waster.

But I haven’t found a mistake in the ‘ihatetomatoes’ classes yet.

I’ve never had such a positive experience with any online class, at any price.

The depth and breadth of the class is easily the best I’ve seen online. That is the key point I guess.

The depth and breadth of the class is much better than I expected.

5 stars
By Iwona Czapla

Great course, exactly what I was looking for.

I have learned a lot not only about GreenSock, also some css, mainly how to animate in a light easy way.

Looking forward to next courses, I will probably sign up.

5 stars
By Michael Garriques

Very Powerful Stuff!

Petr makes it very easy to learn.

Once you master the projects you will be able to animate pretty much anything.

The sky is the limit.

I highly recommend this course to anyone who is looking to get a comprehensive understanding of GreenSock.

5 stars
By Michael Marian

I really appreciate the course. I have two more modules to go. I have been using GSAP in banner ads, SWFs and HTML5s for years and love it. Taking GSAP into web page development is quite exciting and so I appreciate your methods. You share with “GreenSock” the love for unusual names with your “I Hate Tomatoes” brand. Maybe the invoking of the creative genius of Dr. Seuss.

Thank you so much for your lessons!

4 stars
By Francisco Gaxiola

Great course!

5 stars
By Daniel Tavera

It’s a powerful course, and I really like it, now I can create everything that I want , easy to understand and a great stuff

5 stars
By XIAOYU HOU

Just bought this course and already learning a lot. Please make more make more! Also, I am an AngularJS developer. I will love to see how to use GSAP with Angular. As Angular is 100x time better than jQuery. The Angular Material core team has some sick animation done with GSAP and Angular and I am search everywhere to learn how to do that. If you teach it, I will pay big $$$ to learn. Anyway. Just want to show some love and please, MORE!!

5 stars
By Tom Hartney

Petr’s courses gave me new skill-sets, improving what I offer as a digital creative.

You learn the complete process of a site build, from initial setup to add-ons for sublime, quicker ways to achieve the same results, problems you will encounter and works rounds & real world industry examples are also learnt.

A complete learning package opposed to snippets you would learn elsewhere.

Worth the price of admission!

5 stars
By Tim Jensen

I really like Petr’s style (and his accent) … well organised and enjoyable workshop… I’m definitely inspired by the potential of GSAP – the showcase website examples on the Greensock site are testament to the possibilities.

5 stars
By Anthony Devine

Brilliant course. I would of not known where to start with GreenSock, now I have a good understanding and am looking forward to creating some cool websites.

5 stars
By Maxime Rabot

Lot of fun following your course. Hope you will prepare more for the future.

5 stars
By Yo Be

Bright teacher, great course!

5 stars
By Roelof Dijkstra

Just what I need. A very clear and complete course about GreenSock.
I am enjoying it, keep up the good work!

5 stars
By Gerard Eley

The course is well structured and guides the student from basic animations to more advanced ones.

5 stars
By Tyler Andor

I really appreciate the thoroughness and depth with which Petr explains the process of thinking through, setting up, and executing SVG animation.


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?