Can GSAP animation be tied to scroll?

[jpyne4]

Sorry if this is a noob questions, but I'm a noob to GreenSock -- can someone point me to the documentation if I can tie an animation to scroll?  ie -- I want an image to scale and become opaque as I'm scrolling down the site to reveal some content behind it.  If they stop scrolling mid animation, I would like it to stop animating.  Thanks in advance.

[Shaun Gorneau]

Absolutely. Just pause the initial timeline and use the user's calculated scroll position (scroll distance/container height) to get a number from 0 to 1 and continually use that update value to set the timeline's progress() value.

 

If you're already using jQuery, something like this

var tl = new TimelineLite( {paused: true} );

$(window).scroll( function(){
  var st = $(this).scrollTop();
  var ht = $( '#some-container' ).height();
   if( st < ht && st > 0 ){
        windowScroll = st/ht;
        tl.progress( windowScroll );
    }
});

 

Of course with some actual animations happening on the timeline

[jpyne4]

That's great news, thanks for the quick reply, I'll keep looking into GSAP -- pretty impressed so far.

[Shaun Gorneau]

I just updated my first comment .. should help. Stick with it ... GSAP is awesome!

[PointC]

Hi @jpyne4

 

Welcome to the forum.

 

We've had a few discussions about scrolling and tweening. Some about using ScrollMagic and others how to do it without any 3rd party library. Here are a couple threads that may be helpful.

 

Happy tweening and welcome aboard.

[AliBay]

On 10/5/2017 at 12:47 AM, Shaun Gorneau said:

I just updated my first comment .. should help. Stick with it ... GSAP is awesome!

Shaun thank you so so much. with GSAP3 it is was really confusing to work with scroll magic so I was searching for another option. but now I can accomplish all the animations without scrollMagic and just by using GSAP3. thank you