Scrolltrigger won't update start/end position on height change

[h-amad 0 Likes (Newbie)]

Hello fellow members,

I am trying to refresh Scrolltrigger on this tween but the start/end positions of the each img are not updating after height change of previous img.

am i doing the refresh wrong or is there an easier way to achieve this? 

See the Pen bGxvVGx by hamadarabi (@hamadarabi) on CodePen

[Rodrigo 5,382 Likes (Superhero)]

Hi,

 

If you add this to your configuration you'll see where the problem lays:

onUpdate: () => {
  console.log("update", Date.now());
  ScrollTrigger.refresh();
},

You're creating an endless loop. I strongly recommend you against calling ScrollTrigger's refresh method on any GSAP update callback, it could lead to a situation like this and most likely really bad performance. If I was you I'd make the images containers height fixed and not depending on the image's height, then make the height of the image responsive and animate it's scale from a smaller value. Sure the effect looks great but it opens a huge can of worms.

 

Hopefully this helps.

Happy Tweening!

[h-amad 0 Likes (Newbie)]

thank you @Rodrigo , i didn't use the animation after all, it didn't make sense to me if they cant change heights.