Zoom image on scroll with GSAP scrollTrigger

Question

I built a zoom effect that is triggered with GSAP's ScrollTrigger, it works fine but I want to slowly (scrub) zoom the image on scroll and not animate the zoom on scroll when entering the trigger.

I found a javascript solution in the comments here but I am looking for a GSAP ScrollTrigger solution but it gives a good idea what I'm looking for:
Zoom an image on scroll with javascript

This is what I have so far:

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/[email protected]/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>

Don't use CSS transitions as they cannot be scrubbed. Use GSAP to animate the property instead (scale: 1.2 in the tween vars). — Zach Saucier
– Zach Saucier, Commented Aug 17, 2021 at 13:08
That was really easy, thank you so much for helping! @ZachSaucier — Erwin van Ekeren
– Erwin van Ekeren, Commented Aug 17, 2021 at 13:21

Erwin van Ekeren · Accepted Answer · 2021-08-17 13:24:18Z

Actually the solution is very simple (thanks to Zack in the comments of my initial question) and you can find it here:

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/[email protected]/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>

Collectives™ on Stack Overflow

Zoom image on scroll with GSAP scrollTrigger

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related