Jump to content


Timeline + ScrollTrigger issue on resize event

Moderator Tag

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.