javascript - GSAP 3 ScrollTrigger not working with dynamically changing value (not refreshrecalculated) - Stack Overflow

admin管理员组

文章数量:1394217

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

Share Improve this question Follow edited Nov 3, 2020 at 19:13 Zach Saucier 26.1k1212 gold badges9898 silver badges159159 bronze badges asked Nov 3, 2020 at 11:42 TiffanyTiffany 23911 gold badge88 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

本文标签：