Jump to content
GreenSock

Amanda

Trigger TweenTo on Scroll

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I've created a timeline and tweento buttons that are working as I have hoped. 

 

What I also need to happen isa scroll to trigger the same as the click function. 

 

For example the following tweens to the label slide2, I'd like an initial scroll down to also tween to that label. 

$("#two2").click(function(){
   tl1.tweenTo('slide2');
});

Any pointers much appreciated. 

 

Thanks!

See the Pen NNGKYE by ald603 (@ald603) on CodePen

Link to comment
Share on other sites

  • Solution

Hi ald603  :)

 

you can use something like this : 

See the Pen MyaWzm by MAW (@MAW) on CodePen

document.addEventListener("mousewheel",Go);
document.addEventListener("DOMMouseScroll",Go);

function Go(e){
    var Tl = tl1 , SD = e.wheelDelta || -e.detail ;
    if( SD>0 && Tl.getLabelBefore()!=null ){
        Tl.tweenTo( Tl.getLabelBefore() )
    }else if( SD<0 && Tl.getLabelAfter()!=null ){
        Tl.tweenTo( Tl.getLabelAfter() )
    };
};
  • Like 5
Link to comment
Share on other sites

Thank you so much! This is exactly what I meant. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×