Timeline + ScrollTrigger issue on resize event

[Mehrus]

Hi guys,

 

I am working on a banner animation. I have noticed that when I resize the browser window my video container class does not update. It is understandable because my variables that I passed to scrollTrigger and Timelines are defined once and they keep their values. I have tried to overwrite variables via:

 

document.addEventListener('resize', myCallback)

 

and inside myCallback function I tried to kill() the timelines and run them again but this made duplication of ".pin-spacer" inside a ".pin-spacer" and made a big mess in the DOM.

 

I want to update these variables(videoYShift, videoWidth, videoHeight):

searchBannerScrollAnim.to('.search_banner .file_video_wrap', { x: videoXShift, y: -videoYShift, width: videoWidth, height: videoHeight });

 

My question is what is the valid way to "refresh" the scrollTrigger and Timelines so the video stays centered and responsive on the resize event? The issue is the most visible when you resize the window from your current size to the smaller one.

 

Thank you in advance.

See the Pen OJjXMZy by Mehrus (@Mehrus) on CodePen

[OSUblake]

Welcome to the forums @Mehrus

 

Using invalidateOnRefresh is the right approach, you just need use function based values to grab the correct value.

 

Just some pseudo code. You will need to use your own calculations.

 

.to(".foo", {
  y: () => innerHeight / 2
})