Trigger each element individually on scroll with GSAP Scrolltrigger

Question

I am working with GSAP/Scrolltrigger and I want to change the border-radius of a div on scroll (scrub). It works but somehow it resets and loops when the next element with the same trigger class enters and I can't find the solution, what am I missing?

gsap.utils.toArray(".bgcolor").forEach(function(elem) {

const $section = $(".bgcolor");
  
radiusChange = gsap.fromTo($section, { borderRadius: "1rem" },{ borderRadius: "5rem" })

  ScrollTrigger.create({
    trigger: elem,
    start: "top 75%",
    scrub: true,
    animation: radiusChange,
    markers: true,
  });
  
});

* {margin:0;}

.spacer {
  position:relative;
  width:100%;
  height:100vh;
  background:black;
}

.content {
  padding:100px 0;
}

.bgcolor {
  height: 200px;
  margin-bottom:40px;
  background:lightblue;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<section class="spacer"></section>

<div class="content">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-2 mb-6 bgcolor"></div>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-2 bgcolor"></div>
    </div>
  </div>
</div>

<section class="spacer"></section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

I also tried it by coding it the following way but that also doesn't seem to work because now it doesn't trigger the startpoint and immediately triggers the last rem number.

const borderradius = gsap.utils.toArray('.borderradius');
borderradius.forEach(radius => {

  radiusChange = gsap.fromTo(borderradius, { borderRadius: "0rem" },{ borderRadius: "5rem" })

  gsap.to(radius, { 
    scrollTrigger: {
      trigger: radius,
      scrub: true,
      animation: radiusChange,
    }
  })
});

* {margin:0;}

.spacer {
  position:relative;
  width:100%;
  height:100vh;
  background:black;
}

.content {
  padding:100px 0;
}

.borderradius {
  height: 200px;
  background:lightblue;
  margin-bottom:40px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<section class="spacer"></section>

<div class="content">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-2 borderradius"></div>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-2 borderradius"></div>
    </div>
  </div>
</div>

<section class="spacer"></section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

Erwin van Ekeren · Accepted Answer · 2023-01-30 22:51:16Z

1

I found the solution, I wasn't far off, here is the solution:

gsap.utils.toArray(".bgcolor").forEach(function(elem) {
const $section = $(elem);
const radiusChange = gsap.fromTo($section, { borderRadius: "1rem" },{ borderRadius: "5rem" });

  ScrollTrigger.create({
    trigger: elem,
    start: "top 75%",
    scrub: true,
    animation: radiusChange,
    markers: true,
  });
});

answered Jan 30, 2023 at 22:51

Erwin van Ekeren

7304 gold badges16 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trigger each element individually on scroll with GSAP Scrolltrigger

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related