Recalculate tween duration on window resize

[Mitya Kobrinsky]

Hi!

 

I'm trying to make several panels appearing one by one and scrolling down if needed. So I calculate y-shift and duration for each panel by function, based on panel heights. And it works... partially. When I resize the window, y-shifts are recalculating, but durations aren't. Now if big panel, which didn't need scrolling, became small and does need it now, it just jump from start position to end, because duration is still zero

 

What is the best way to refresh durations?

See the Pen NWgmpyv by mityakobrinsky (@mityakobrinsky) on CodePen

[OSUblake]

Hi Mitya!

 

Durations can't be recalculated. It'd really mess up the sequencing if they could.

 

So you'd need to kill your ScrollTriggers and make them again if you need different durations. If you create your ScrollTriggers inside matchMedia, it will do that for you.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

[GreenSock]

Perhaps this is what you want?: 

See the Pen JjJVMVP?editors=0010 by GreenSock (@GreenSock) on CodePen

[Mitya Kobrinsky]

Dear @OSUblake, thanks for showing the way!

 

Dear @GreenSock, that is exactly what I dreamed of!