How to inverse GSAP animation

Question

I have some problem with my code. When scrolling the slide down, it animates in turn ...

const scrollBottom1 = (caseIndex) =>{        
tl.to(slide1,0,{display:"block"})
        .to(slide0,1,{y:"-100vh",ease:Power2.easeOut})
        .to(slide1,1,{y:"0vh", ease:Power2.easeOut }, 0)
        .to(slide0,0,{display:"none", y:"0"})
        .to(slide1,1,{y:"0",})
        console.log('Show slide 1')

    }

    const scrollBottom2 = (caseIndex) =>{
        tl.to(slide2,0,{display:"block"})
        .to(slide1,1,{y:"-100vh",ease:Power2.easeOut})
        .to(slide2,1,{y:"0vh", ease:Power2.easeOut },"slide1-=1")
        .to(slide1,0,{display:"none", y:"0"})
         .to(slide2,0,{y:"0"})

        console.log('Show Slide 2')
    }

    const scrollBottom3 = (caseIndex) =>{
        tl.to(slide3,0,{display:"block"})
        .to(slide2,1,{y:"-100vh",ease:Power2.easeOut})
        .to(slide3,1,{y:"0vh", ease:Power2.easeOut },"slide2-=1")
        .to(slide2,0,{display:"none", y:"0"})
        .to(slide3,0,{y:"0"})
        console.log('Show Slide 3');

I don't have idea how to make this animation the other way ...

const scrollTop1 = (caseIndex) =>{


        console.log('Show slide 3');
    }

    const scrollTop2 = (caseIndex) =>{
        console.log('Show Slide 2')
    }

    const scrollTop3 = (caseIndex) =>{
        console.log('Show slide 1')
    }

Someone have idea how to do that?

Answer 1

You cannot reverse the animations this way. Here's what you need to do:

Turn each slide animation steps to a new timeline e.g.

var tl1 = new TimelineMax({paused: true});
tl1
  .to(slide1,0,{display:"block"})
...

Then change the code to call a related timeline e.g.

const scrollBottom1 = (caseIndex) =>{ tl1.play(); }

When you need to reverse the timeline animation, just call it with

const scrollTop1 = (caseIndex) =>{ tl1.reverse(); }

Of course the latter works fine if the timeline's "playhead" is at the end. You can put it there by using

tl1.paused(true);
tl1.seek(tl1_end);
tl1.reverse();

where tl1_end is the time when your timeline finishes animations (it's practical to use labels for that when defining timeline subanimations so you can put a label in the seek call instead of time in seconds).

If that doesn't solve your intended page animations, maybe check ScrollMagic library that allows (scrolling) event triggered animations more elegantly.

You can find more documentation for using TimelineMax at Greensock's site.