GreenSock 101

Free

All prices in USD

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

Are you ready to start learning the basics of GreenSock and web animations?

This free online course will walk you through the GreenSock API and most of its components in a series of fast paced GreenSock tutorials.

GreenSock Tutorials – Table Of Content
Lesson 1 – 5:22 Selecting html elements using jQuery and JavaScript
Lesson 2 – 5:35 TweenLite – .to, .from, .fromTo, .set
Lesson 3 – 4:37 Easing – Default Easing, EasePack Plugin
Lesson 4 – 3:38 Simple Callback Functions
Lesson 5 – 5:40 Animating Multiple Objects
Lesson 6 – 3:45 Adding Tweens To A Timeline
Lesson 7 – 7:47 Controlling A Timeline Playback
Lesson 8 – 5:11 Staggering Animations
Lesson 9 – 7:26 Repeating Timelines – TimelineMax vs TimelineLite
Lesson 10 – 7:16 Repeating Timelines – Part 2
Lesson 11 – 11:21 TweenMax – The King Of Web Animations

Additional Information

  • Total class duration: 1h 7min
  • Free online course, with lifetime access.
  • Video files not available for download.
  • Learn at your own pace.

What’s covered?

  • GreenSock TweenLite, TimelineLite, TimelineLite and TweenMax.
  • No need to have GSAP membership to enjoy this workshop.

Intended Audience

  • designers and developers with a working knowledge of HTML and CSS
  • designers and developers 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 simple introduction to GreenSock API
  • anyone who wants to learn GreenSock but is not sure where to start

Objectives

  • Explain GSAP API in a quick simple demos.
  • Learn how to create a basic web animations.
  • Fast paced introduction of GreenSock API.

Prerequisites

  • Basic JavaScript or jQuery knowledge is welcome, but not necessary.
  • All working files are available for download.
  • Working knowledge of HTML5 and CSS3.
  • Positive attitude towards learning new techniques.
  • A genuine interest in GreenSock and JavaScript animations.
  • Tomato lovers more than welcome!

56 thoughts on “GreenSock 101”

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

  2. 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!

  3. 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!

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

  6. Andrew Christ

    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.

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

  8. cardozo hernandez

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

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

  11. Alvaro Gomez

    A friend of mine recommended GreenSock for an animation I was trying to do using jQuery, I’m glad he did.

    The introductory videos were great, they did help a lot when I started, I didn’t use the downloadable documents, I started experimenting with my own.

  12. Sherrie Roberts

    The course was a wonderful introduction to Greensock. I would recommend this course to anyone who is interested in learning the basics.

    Petr always does a great job with his tutorials and he explains everything so well you can actually start building your own awesome animations.

  13. Steve Bolman

    Fantastic!!! Level and amount of material per session was perfect for me. I will definitely be taking more classes from Petr. I am also starting to dislike tomatos, maybe just a little.

  14. Xav Ker

    I worked hard to learn jQuery and was quite disappointed when I tried scrollMagic, which asked to use another language I never heard of. I was about to quit my project when I saw those videos. Thank you Petr, you gave me hope again : GS is not hard to understand and apply ! Now let’s combine it with ScrollMagic !
    Another great point for you : you speak english a way I can easily understand (I’m French…) 😉
    If I may complain about anything, you should give more details about the differences between Lite, Max, and CssScript : a video like “Which one should you chose for your project”, considering the technical possibilities, weights of files, etc.
    Hum by the way, I’m really interested in the part you quickly mentioned in Unit 10 : how can I make a real loading screen connected with the actual content of my project, which would disappear once my site fully loaded and fully operationnal ? (I don’t use HD Images, just multiple requests and scripts…)

  15. Omar

    Great content, as always. the teaching skills from this guy are awesome, is just what you need if want to start to learn GSAP.

  16. Grahame Aitchison

    I have recommended this course to my entire team. Clear and succinct, your courses are time well spent for any front end developer.

  17. Vinayak Phal

    Awesome course, I really like GSAP, would like to implement it with scrollmagic.
    Thanks for great tutorial.

  20. Jinseong Kim

    This course is interesting and easy . It is recommended for those who first started. Petr Tichy Thank you.

  21. jts

    This is an excellent introduction to GreenSock. One hour well-spent, after which I feel much more confident using this library. Thank you!

  22. Jerry.Yu

    I feel really lucky to find this course. it is really useful and helpful.
    I have recommended this course to all my team member as well.
    Easy understanding without any problem although I am not a native English speaker. :-)

  24. Chris Getz

    Very informative, and well organized with respect to the quantity of information and order of introduction.

  25. Eirik Hanssen

    Thank you for making this excellent course. Having previously fiddled with plain JavaScript animations of SVG, I had no previous experience with animation specific JavaScript API’s such as greensock and this course has taught me a lot. Now there is no going back! Next I would like to learn more about path based animations.
    Cheers!

  26. Paul McKenna

    Concise and easy to follow. Very thankful for this course!

    Thanks so much, you’re an asset to the internet mate

  30. Diahron Grismore

    I really enjoyed this tutorial. GreenSock is an amazing program. Not hard to to learn. Beginners as well as experienced programmers will find this video helpful. After the excellent guidance with Petr, it’s only a matter of time and imagination to create professional looking programs. Great program.

  31. RT

    This is a great way of getting started with Greensock – concise and easy to follow. Recommended!

  32. Donald Westland

    Nice lesson, learned a lot. First started on Lynda.com, your course added a lot more to my animation skills. Looking forward to seeing your additional courses.

  33. Kara Shapiro

    This is a fantastic introduction to Greensock! Peter has a knack for breaking things down when you need it and his explanations are very easy to understand. I highly recommend this course!

  34. aldo praherda

    Your tutorials are very easy to follow, and you’re so funny too. Very Recommended. Thanks

  35. nacer yous

    I was scared and bored to learn javascript especially animation,
    Now with what I learned from you I can finally make my future portfolio interactive.

    THANK YOU SO MUCH and I hate tomatoes too by the way hahaha but I love learn from your website 😉

  36. Alex Alex

    My english is not very perfect, but you so clear explain! Thanks alot for your efforts !!! this course gave me all what i wanted to know! the GreenSoc is not GreenSoc without you))))) Thanks again !

  38. k c

    Am an intermediate web designer but semi beginner/intermediate greensock-er, using the classes to improve my understanding of greensock can only say its direct and easy for anyone to understand. A*

  39. Bartek Pe

    Great tutorial, like whole ihatetomatoes. Petr is a very good teacher and can explain web animation problems in easy way. I’m a big fan !

  40. Francesco Moro

    Well done Petr! I love your courses, I did GSAP 101 and ScrollMagic and I’m already usiging these scripts on my websites!! I really recommend these courses!

  42. Ilya Vakhrin

    Great tutorial Petr! Following your youtube channel for almost 2 years already and really appreciate what you do. Thanks again!

  45. Attila Bakos

    Great course. I’m a total newbie in this area, but from this videos i learned the basics, now i can animate things, i can build a timeline, i know all the things necessary to build my first scroll based website.

  46. sreekant gopalakrishnan

    Excellent Petr! Helped me a great deal to understand greensock and animating SVGs. The tutorial is well structured and a breeze to cover. It removed all the confusions in me about those animations on the web. Feels good to know that you can get creative and make things now!!

  47. Jean-Rémi Larcelet-Prost

    It’s a pretty course you’ve created here, I never try Greensocks before, and now, I think I can do lots of stuff ! 😀

    Thank you !

  48. Cunny McFanny

    Summary: Great tutorial, and fast paced. Does not cater (nor should it) to newbies.

    Petr is a great instructor! I needed to get used to his accent, but that only took a minute or so. The best part is that the tutorial goes at the right speed: fast! Most developers are sick of tutorials that cater for the slowest denominator, and go way too slow explaining the basics to people who shouldn’t really be doing the courses till they’ve built up enough knowledge. But this tutorial goes quickly, and includes only the most useful information. It assumes you know the basics, but that enables it to go much faster and more efficiently. Thanks again Petr.

  51. Cyrus Gomez-Alcala

    I never used ScrollMagic, nor have I ever heard of it until I found Ihatetomatoes on Youtube. These videos are direct, clear, and well instructed. I can’t wait to complete this workshop and implement ScrollMagic in my projects!!

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

    This is a testament to both GSAP and to Petr’s ability as a teacher! I’ve recommended his courses to my peers at work and they were equally blown away!

  54. irvin io

    I really enjoy your style of instruction… straight to the point… many other video courses I would lose interest halfway through because of the slow pace… but yours is perfect.

    As for the content… really great. I will definitely be using greenshock in my next project!

    Thank you

  55. Sabine Probst

    Excellent class! Each topic is thoroughly explained.

    I particularly enjoyed your demo on positioning. This is clearly important to know, but tough to learn. Your demo’s help tremendously visualizing how to position objects.

    Can’t wait to get started with your other classes :)

    Thanks!!!

Comments are closed.