Manually Control the Animation with progress in GreenSock
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.
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.