GreenSock Tutorials on YouTube

GreenSock Tutorials on YouTube

Do you prefer to watch videos instead of following written tutorials?

Check out my latest uploads on the Ihatetomatoes YouTube channel.

TweenLite and TimelineLite Tutorial

In the following 3 part tutorial series you will learn how to create a simple image slideshow using GreenSock.


Part 1 – Setup HTML, CSS

View Related Article

What you’ll learn:

  • How to start your HTML5 project
  • How to setup html structure for a full-screen layout
  • How to create a full-screen layout with CSS

Part 2 – TweenLite, TimelineLite, Go to Next Slide

What you’ll learn:

  • How to use init() function
  • How to use TweenLite and TimelineLite
  • How to play a timeline on click

Part 3 – TweenLite, TimelineLite, Go to Previous Slide

What you’ll learn:

  • How to animate to a previous slide
  • How to use .set(), .to(), .fromTo() methods
  • How to create an elegant tilt effect

Other GreenSock Learning Resources

Share this


Want To Learn More About GreenSock?

Join me in the GreenSock Workshop and learn how to build 3 interactive projects from start to finish.

Visit GreenSock Tutorials to see the SVG Lab project live.

Download Free Toolkit

All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.

100% Privacy. Guaranteed! Powered by ConvertKit

3 thoughts on “GreenSock Tutorials on YouTube

  1. Norman Dubois

    Hi Petr,

    Awesome videos! I’m so excited to check them out.. Hopefully I can make it at weekend. I’ve my first privat project and doing it after work, so I’m a little bit busy at the moment… Of course I’ll be using some animations! 🙂

    I wondered how I could trigger some greensock animation on scroll?
    If i do something like this, It’ll trigger the animation everytime on scroll, but I want to trigger it only once… Usualy I do things like that with css animations and transitions, but I wanted to try it with greensock…
    Here is a little snippet 🙂

    $(window).on(‘scroll’, function(){
    var scrollTop = $(this).scrollTop();
    if (scrollTop > ( $(‘.element’).offset().top – 400) ){
    TweenMax.staggerFrom($element, 0.2, {autoAlpha: 0, x: ‘-=100px’}, 0.2);

    Do you have an idea?

    Thanks Petr!! 🙂

    1. Petr Tichy Post author

      Hi Norman, you’re right about your snippet it will trigger the animation everytime.

      You have a few options, either use ScrollMagic, create a cookie or html5 data attribute and if they exist you won’t trigger the animation again.

      ScrollMagic would be probably the easiest to implement, but try cookies or data attributes.

      Hope that helps.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.