Trigger TweenTo on Scroll

[Amanda]

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.

[Diaco]

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() )
    };
};

pls check the TimelineMax Doc. :

.getLabelAfter() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getLabelAfter/

.getLabelBefore() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getLabelBefore/

 

[Amanda]

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