如何反转 GSAP 动画

Question

我的代码有问题。向下滚动幻灯片时，它依次动画...

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');

我不知道如何用另一种方式制作这个动画...

const scrollTop1 = (caseIndex) =>{


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

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

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

有人知道怎么做吗？

Answer 1

您不能以这种方式反转动画。这是您需要做的：

将每个幻灯片动画步骤转换为新的时间轴，例如

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

然后更改代码以调用相关时间线，例如

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

当你需要反转时间轴动画时，用

调用即可

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

当然，如果时间线的 "playhead" 在末尾，则后者可以正常工作。你可以使用

把它放在那里

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

其中 tl1_end 是您的时间轴完成动画的时间（在定义时间轴子动画时使用标签是实用的，这样您就可以在搜索调用中放置标签而不是以秒为单位的时间）。

如果这不能解决您想要的页面动画，也许检查允许更优雅地（滚动）事件触发动画的 ScrollMagic 库。

您可以找到更多使用 TimelineMax at Greensock's site 的文档。

如何反转 GSAP 动画

How to inverse GSAP animation

html

jquery

gsap