Share Posted October 19, 2021 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 Link to comment Share on other sites More sharing options...
Share Posted October 19, 2021 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 }) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now