Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Manually Control the Animation with progress in GreenSock

    John LindquistJohn Lindquist

    Each animation can be moved to a specific point in time based on the progress setting between 0 and 1 (0% and 100%). This lesson shows how to control the progress using the scroll wheel of the mouse which can easily fast-forward or rewind through the timeline.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Man: To manually advance through the timeline, I'm going to set up an event listener on the mouse wheel, and inside of here whenever I get a wheel event, I'm going to set the progress of the timeline, so progress to the current progress, so we can use this as a getter. So progress + .1 which will be 10 percent. Hit save there, and now scroll, scroll, scroll, scroll, scroll, and you can see it's advancing 10 percent each time I move the scroll wheel.

    You can also make the progress go backwards. To do that, I'm going to get the event, and if the event.wheelDelta > , I'm going to advance the timeline, else, I'm going to copy and paste this line and I will reverse the timeline by subtracting 10 percent. Now I can go forward and backwards. Forward and backwards. You'll just to have to take my word that I'm using the scroll wheel to do this.

    You can see that the current scrolling behavior is kind of jittery, and we can actually ease the progress as well. Instead of this, which I'll comment out, I'm going to use and the target is the timeline itself, and I'll say .25 seconds is the duration, and the progress can be += .1. So we're tweening the progress property on the timeline. Now I'll copy and paste this down here and I'll say -=, hit save, and now when I scroll with the scroll wheel, you can see it's easing between as I scroll.