ScrollTrigger and resizing window

[BarheimCoder]

I've created a pen to test this. I'm trying to run a different timeline if the screensize reaches a certain breakpoint. As of now it works well on load, but resizing the window creates a few issues:

• The background color I set up to test works, but it overlaps
• The lottie animation freezes

 

I think when resizing the window there should be something to rebuild the timeline and clear of the content of the old one, but so far nothing I've tried really worked but there seems to be many things that could fix this like .kill, .clear or invalidateOnRefresh for scrolltrigger.

 

Any advice is very welcome. Thanks in advance

See the Pen YzQjbVP by barheimcoder (@barheimcoder) on CodePen

[akapowl]

Hey there @BarheimCoder

 

1 hour ago, BarheimCoder said:

I think when resizing the window there should be something to rebuild the timeline and clear of the content of the old one

 

There is; what you are looking for is ScrollTrigger.matchMedia() - it will handle that work for you.

 

That could maybe look something like this in your case. Hope it helps.

 

See the Pen f02baa4689f87ef6259e344afd8f50b1 by akapowl (@akapowl) on CodePen

 

 

Edit:

 

And if there isn't that much you want to change for different screensizes, as is the case in your demo, you can of course reduce your code down a bit by using a function with different parameters passed to create your ScrollTriggers for different viewports.

 

 

See the Pen 5e46300a8c764b6b39437281be6ebd8c by akapowl (@akapowl) on CodePen