gsap是这样用的吗？看我代码总觉得有问题？

Question

// 向上滚动
      if (n > 0) {
        console.log('向上滚动', index);
        if (index === 1) {
        } else if (index === 2) {
          gsap.to('.home_page .one_screen', {
            // y: '-100vh',
            ...commonGSAP,
            opacity: 0,
            top: '-20vh',
            onComplete: () => {
              gsap.set('.home_page .home_two_screen', {
                top: '0vh',
                opacity: 1,
              });
              gsap.set('.home_page .home_two_screen .left', {
                width: '13.6rem',
              });
              gsap.to('.home_page .home_two_screen .left', {
                ...commonGSAP,
                clipPath: 'polygon(0px 10%, 84% 10%, 92% 64%, 0% 64%)',
              });
              gsap.to('.home_page .home_two_screen .right', {
                ...commonGSAP,
                clipPath: 'polygon(0px 25%, 100% 25%, 100% 77%, 16% 77%)',
              });
              gsap.to('.home_page .home_two_screen .text', {
                ...commonGSAP,
                top: '55%',
              });
            },
          });
        } else if (index == 3) {
          gsap.to('.home_page .home_two_screen .text', {
            top: '0rem',
            opacity: 0,
            ...commonGSAP,
          });
          gsap.to('.home_page .home_two_screen .left', {
            ...commonGSAP,
            width: '90vw',

            clipPath: 'polygon(0px 10%, 84% 10%, 92% 64%, 0% 64%)',
            opacity: 0,
          });
          gsap.to('.home_page .home_two_screen .right', {
            ...commonGSAP,
            clipPath: 'polygon(38% 2%, 100% 15%, 100% 66%, 62% 66%)',
            opacity: 0,

            onComplete: () => {
              gsap.set('.home_page .home_two_screen', {
                opacity: 0,
              });
            },
          });
          gsap.set('.home_page .three_screen_box', {
            top: 0,
            opacity: 0,
          });
          gsap.to('.home_page .three_screen_box', {
            ...commonGSAP,
            opacity: 1,
          });
          $('.three_screen_box_list_item').each(function (i) {
            gsap.to(this, {
              y: 0,
              opacity: 1,
              ...commonGSAP,
              delay: i * 0.1,
            });
          });
        } else if (index == 4) {
          $('.layout_header').addClass('layout_header_four');
          $('.three_screen_box_list_item').each(function (i) {
            gsap.to(this, {
              y: '-100vh',
              ...commonGSAP,
              delay: i * 0.1,
            });
          });
          gsap.to('.home_page .three_screen_box', {
            ...commonGSAP,
            opacity: 0,
          });
          gsap.to('.home_page .four_screen_box', {
            top: '0',
            ...commonGSAP,
            opacity: 1,
          });
          gsap.fromTo(
            '.home_page .four_screen_box  .list_item:nth-child(1) .list_item_left',
            {
              widht: '0',
              flexBasis: '0',
            },
            {
              width: '11.22rem',
              flexBasis: '11.22rem',
            },
          );
          gsap.fromTo(
            '.four_screen_box_list_btn',
            {
              left: 0,
              top: 0,
            },
            {
              left: '50%',
              top: '50%',
            },
          );
        } else if (index == 5) {
          console.log('滚动了第五屏');
          $('.layout_header').removeClass('layout_header_four');
          $('.layout_header').addClass('layout_header_five');
          gsap.to('.home_page .five_screen_box', {
            top: '0',
            ...commonGSAP,
            opacity: 1,
          });
          gsap.fromTo(
            '.home_page .four_screen_box  .list_item:nth-child(4) .list_item_left',

            {
              width: '11.22rem',
              flexBasis: '11.22rem',
            },
            {
              widht: '100vw',
              flexBasis: '100vw',
            },
          );
          gsap.fromTo(
            '.four_screen_box_list_btn',
            {
              left: '50%',
              top: '50%',
            },
            {
              left: '100%',
              top: 0,
            },
          );
          gsap.to('.home_page .four_screen_box', {
            ...commonGSAP,
            top: '-100vh',
            opacity: 0,
          });
        }
      } else {
        // 向下滚动
        console.log('向下滚动', index);
        if (index === 1) {
          console.log('滚动了第一屏');
          gsap.to('.home_page .home_two_screen .left', {
            ...commonGSAP,
            clipPath: 'polygon(0 100%, 50% 100%, 50% 100%, 0% 100%)',
          });
          gsap.to('.home_page .home_two_screen .right', {
            ...commonGSAP,
            clipPath: 'polygon(0 100%, 100% 100%, 100% 100%, 0% 100%)',
          });
          gsap.to('.home_page .home_two_screen .text', {
            ...commonGSAP,
            top: '100vh',
            onComplete: () => {
              gsap.set('.home_page .home_two_screen', {
                top: '100vh',
                ...commonGSAP,
                opacity: 0,
              });
              gsap.to('.home_page .one_screen', {
                ...commonGSAP,
                opacity: 1,
                top: '0vh',
              });
            },
          });
        } else if (index === 2) {
          console.log('滚动了第二屏');
          gsap.set('.home_page .home_two_screen', {
            top: '0vh',
            ...commonGSAP,
            opacity: 1,
          });
          gsap.set('.home_page .home_two_screen .left', {
            width: '13.6rem',
            ...commonGSAP,
            opacity: 1,
          });
          gsap.to('.home_page .home_two_screen .left', {
            ...commonGSAP,
            opacity: 1,
            clipPath: 'polygon(0px 10%, 84% 10%, 92% 64%, 0% 64%)',
          });
          gsap.to('.home_page .home_two_screen .right', {
            ...commonGSAP,
            clipPath: 'polygon(0px 25%, 100% 25%, 100% 77%, 16% 77%)',
            opacity: 1,
          });
          gsap.to('.home_page .home_two_screen .text', {
            ...commonGSAP,
            top: '55%',
            opacity: 1,
          });

          gsap.to('.home_page .three_screen_box', {
            ...commonGSAP,
            opacity: 0,
            onComplete: () => {
              gsap.set('.home_page .three_screen_box', {
                top: '100vh',
              });
            },
          });

          $('.three_screen_box_list_item').each(function (i) {
            gsap.to(this, {
              y: '50vh',
              ...commonGSAP,
              opacity: 0,
              delay: i * 0.1,
            });
          });
        } else if (index === 3) {
          console.log('滚动了第三屏');
          gsap.to('.home_page .three_screen_box', {
            ...commonGSAP,
            opacity: 1,
          });
          $('.three_screen_box_list_item').each(function (i) {
            gsap.to(this, {
              y: 0,
              ...commonGSAP,
              delay: i * 0.1,
              opacity: 1,
            });
          });
          gsap.to('.home_page .four_screen_box', {
            ...commonGSAP,
            top: '100vh',
            opacity: 0,
          });
          $('.layout_header').removeClass('layout_header_four');
        } else if (index === 4) {
          $('.layout_header').addClass('layout_header_four');
          $('.layout_header').removeClass('layout_header_five');

          console.log('滚动了第四屏');
          gsap.to('.home_page .four_screen_box', {
            ...commonGSAP,
            top: '0vh',
            opacity: 1,
          });
          gsap.to('.home_page .five_screen_box', {
            ...commonGSAP,
            top: '100vh',
            opacity: 0,
          });

          gsap.fromTo(
            '.home_page .four_screen_box  .list_item:nth-child(4) .list_item_left',
            {
              widht: '100vw',
              flexBasis: '100vw',
            },
            {
              width: '11.22rem',
              flexBasis: '11.22rem',
            },
          );
          gsap.fromTo(
            '.four_screen_box_list_btn',
            {
              left: '100%',
              top: 0,
            },
            {
              left: '50%',
              top: '50%',
            },
          );
        } else if (index === 5) {
        }
      }

我才是5屏幕，我写的都快疯了。就是进来的时候，动画从下到中间，离开的时候，从中间到上面，反向操作也是这样。

Answer 1

gsap有timeline的呀，看看文档 https://greensock.com/docs/v3/GSAP/Timeline；

这里有个demo:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="./favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google" content="notranslate" />
    <title>Demo</title>
    <script src="https://lib.baomitu.com/gsap/3.12.2/gsap.min.js"></script>

    <style>
      .box{
        width: 50px;
        height: 50px;
        margin-top: 30px;
      }
      .box1{
        background: red;
        margin-top: 30px;
      }
      .box2{
        background: cadetblue;
        margin-top: 30px;
      }
      .box3{
        background: coral;
      }

    </style>
  </head>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>


    <script>
      /**
       * 新建了一条总时间轴动画 timeline
       * 默认每条子时间轴动画为1s （defaults: {duration: 1,}）
       * timeline 这条总时间轴动画默认状态是暂停（paused: true）
       * timeline 这条总时间轴动画会延迟一秒开始运动（delay: 1）
       **/
      const timeline = gsap.timeline({
        defaults: {
          duration: 1,
        },
        delay: 1,
        paused: true
      }); 

      // 增加a标识，则三条子动画会同时执行动画
      timeline
      .to('.box1', {x: 50}, 'a')
      .to('.box2', {x: 70}, 'a')
      .to('.box3', {x: 90}, 'a');

      // 三条子动画会同时执行动画，但是最后一条子动画会延迟一秒执行
      // timeline
      // .to('.box1', {x: 50}, 'a')
      // .to('.box2', {x: 70}, 'a')
      // .to('.box3', {x: 90}, 'a+=1');


      // 调用方法，控制timeline时间轴
      timeline.play();

      // 其他方法
      // timeline.pause();

      // timeline.repeat();
    </script>
  </body>
</html>

这个demo，你可以改改参数，配置感受一下；对应的配置，方法看文档就好了