src/1-vivo-scroll-switch-phone-color/scale-phone-to-middle-when-scroll.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="/lib/gsap.min.js"></script>
    <script src="/lib/ScrollTrigger.min.js"></script>
    <style>
      body {
        height: 2000px;
        /* margin-top:1000px; */
      }

      .phone-wrap {
        background: #eee;
        height: 100vh;
        min-height: 750px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
      }

      .phone-wrap img {
        margin-top: 120px;
        background-image: url(../images/iqooneo7-color-img1-md.png);
        background-size: 461px 605px;
        background-position: center;
        background-repeat: no-repeat;
        width: 461px;
        height: 605px;
        transform: translate(695px, 575px) scale(2.5, 2.5);
      }
    </style>
  </head>

  <body>
    <div class="phone-wrap">
      <img src="./images/iqooneo7-color-img1-md.png" />
    </div>
    <script>
      gsap.registerPlugin(ScrollTrigger);
      // gsap.to(".phone-wrap img", { x: 200 })
      gsap.to(".phone-wrap img", {
        scale: 1,
        x: 0,
        y: 0,
        scrollTrigger: {
          trigger: ".phone-wrap",
          start: "bottom bottom", // 当 phone-wrap 元素底部，滚动到可视区域底部时, 开始动画
          end: "bottom top", // 当 phone-wrap 底部，到达可视区域顶部的时候，结束动画
          scrub: true, // 表示动画可以重复执行改成false表示只执行一次
          markers: true, // 绘制开始位置和结束位置的线条
          pin: true, // 动画执行期间，页面不进行滚动，动画执行结束后
        },
      });
      // gsap.fromTo(".phone-wrap img", { x: 695,y: 575, scale: 2.5,}, {x: 0, yy: 0, scale: 1});
    </script>
  </body>
</html>