使用 GSAP scrollTrigger 缩放滚动图像

Posted 2023-05-08

【中文标题】使用 GSAP scrollTrigger 缩放滚动图像

【英文标题】：Zoom image on scroll with GSAP scrollTrigger

【发布时间】：2021-10-19 09:28:23

【问题描述】：

我构建了一个使用 GSAP 的 ScrollTrigger 触发的缩放效果，它工作正常，但我想在滚动时缓慢（擦洗）缩放图像，而不是在进入触发器时为滚动缩放设置动画。

我在这里的 cmets 中找到了一个 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>

【问题讨论】：

不要使用 CSS 过渡，因为它们无法被清除。改为使用 GSAP 为属性设置动画（补间变量中的 scale: 1.2）。

这真的很简单，非常感谢您的帮助！ @ZachSaucier

【参考方案1】：

实际上解决方案非常简单（感谢我最初问题的 cmets 中的 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>