CODEWITHSUNDEEP
javascriptgsapscrolltrigger
Erwin van Ekeren
Erwin van Ekeren

Reputation: 730

trigger each element individually on scroll with GSAP Scrolltrigger

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 immidiatly 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>

Upvotes: 0

Views: 2388

Answers (1)

Erwin van Ekeren
Erwin van Ekeren

Reputation: 730

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,
  });
});

Upvotes: 1

Related Questions