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
1×
Become a member
to unlock all features
Autoplay

    Manually Control the Animation with progress in GreenSock

    John LindquistJohn Lindquist
    greensockGreenSock

    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.

    Code

    Code

    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
    Transcript

    Transcript

    Man: 00:00 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.

    00:32 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.

    01:07 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 TweenMax.to 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.

    Discuss

    Discuss