用GSAP scrollTrigger缩放滚动图像

Question

我构建了一个用GSAP的ScrollTrigger触发的缩放效果，它工作得很好，但是我想在进入触发器时慢慢地(擦洗)缩放滚动上的图像，而不是动画缩放滚动。

我在这里的评论中找到了一个javascript解决方案，但是我正在寻找一个GSAP ScrollTrigger解决方案，但是它给了我一个很好的想法：

Zoom an image on scroll with javascript

，到目前为止，这就是我所拥有的：

​

gsap.to( ".scrollimgzoom", {
    duration: 3,
    scrollTrigger: {
        trigger: ".scrollimgzoom",
        start: "top 70%",
        end: "top 30%",
    scrub: true,
        toggleClass: "scrollimgzoomin",
        markers: {
            startColor: "red",
            endColor: "red"
        }
    }
})

.animate {
  width:100%;
  height:100vh;
}

.scrollimgzoomcontainer {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.scrollimgzoom {
  width: 100%;
  height: 100%;
  transition: all 1s;
}

.scrollimgzoomin {
  transform: scale(1.2);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>

<section class="animate"></section>

<section class="animate three">
    <div class="container">

        <div class="row">
            
      <div class="col-md-4"></div>
      
            <div class="col-md-4">
                <div class="scrollimgzoomcontainer">
                    <div class="scrollimgzoom" style="background: url(https://source.unsplash.com/random) no-repeat center center; background-size:cover;"></div>
                </div>
            </div>
            
            <div class="col-md-4"></div>

        </div>

    </div>
</section>

<section class="animate"></section>

​

Answer 1

实际上，解决方案非常简单(感谢Zack在我最初问题的评论中)，您可以在这里找到它：

​

gsap.to( ".scrollimgzoom", {
    scale: 2,
    scrollTrigger: {
        trigger: ".scrollimgzoom",
        start: "top 80%",
        end: "top 10%",
                scrub: true,
        toggleClass: "scrollimgzoomin",
        markers: {
            startColor: "red",
            endColor: "red"
        }
    }
})

.animate {
  width:100%;
  height:100vh;
}

.scrollimgzoomcontainer {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.scrollimgzoom {
  width: 100%;
  height: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>

<section class="animate"></section>

<section class="animate three">
    <div class="container">

        <div class="row">
            
      <div class="col-md-4"></div>
      
            <div class="col-md-4">
                <div class="scrollimgzoomcontainer">
                    <div class="scrollimgzoom" style="background: url(https://source.unsplash.com/random) no-repeat center center; background-size:cover;"></div>
                </div>
            </div>
            
            <div class="col-md-4"></div>

        </div>

    </div>
</section>

<section class="animate"></section>

​