I have a problem when using GSAP's ScrollTrigger.

I set the height of a pinned element in different viewport widths, and it works fine when resizing the window.

But now I want to change hight of the pinned element by clicking the button. I use ScrollTrigger.refresh(); but nothing happens.

Can somebody tell me how to fix it?

ScrollTrigger.create({
  trigger: '.box',
  pin: true,
  start: 'top center',
  end: () => `+=${$('.h-500').height() - $('.box').height()}`,
  markers: true,
  id: "box",
  onRefreshInit: () => {
  },
  onRefresh: () => {
  }
});

function resizeBox(){
  $('.box').css('height', '50px');
  ScrollTrigger.refresh();
}

body{
  margin: 0;
}
.space {
  width: 100%;
}
.h-500 {
  height: 500px;
  background: yellow;
}
.h-1000 {
  height: 1000px;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
}
button {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  font-size: 20px;
}

@media only screen and (max-width: 600px) {
  .box {
    height: 5vw;
  }
}

<script src=".3.1/jquery.min.js"></script>
<script src="@3/dist/ScrollTrigger.min.js"></script>
<script src="@3/dist/gsap.min.js"></script>

<div class="space h-1000"></div>

<div class="space h-500">
  <div class="box"></div>
</div>

<div class="space h-1000"></div>

<button onclick="resizeBox()">resizeBox</button>

I have a problem when using GSAP's ScrollTrigger.

I set the height of a pinned element in different viewport widths, and it works fine when resizing the window.

But now I want to change hight of the pinned element by clicking the button. I use ScrollTrigger.refresh(); but nothing happens.

Can somebody tell me how to fix it?

ScrollTrigger.create({
  trigger: '.box',
  pin: true,
  start: 'top center',
  end: () => `+=${$('.h-500').height() - $('.box').height()}`,
  markers: true,
  id: "box",
  onRefreshInit: () => {
  },
  onRefresh: () => {
  }
});

function resizeBox(){
  $('.box').css('height', '50px');
  ScrollTrigger.refresh();
}

body{
  margin: 0;
}
.space {
  width: 100%;
}
.h-500 {
  height: 500px;
  background: yellow;
}
.h-1000 {
  height: 1000px;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
}
button {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  font-size: 20px;
}

@media only screen and (max-width: 600px) {
  .box {
    height: 5vw;
  }
}

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

<div class="space h-1000"></div>

<div class="space h-500">
  <div class="box"></div>
</div>

<div class="space h-1000"></div>

<button onclick="resizeBox()">resizeBox</button>

• javascript
• gsap
• scrolltrigger

1 Answer 1

This is somewhat of a tricky situation because you're resizing the same element that you're pinning. ScrollTrigger automatically caches the dimensions and such so when the refresh happens ScrollTrigger clears all inline styles (which just happens to clear the new value that you set) and then reverts to its cached state. Whether or not that is a bug or not we (GreenSock) have not determined yet :)

As for how to work around the situation for now, you can create an empty container around your box and pin that instead:

<div class="pin-container">
  <div class="box"></div>
</div>

trigger: ".pin-container"

Demo