Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Mehrus

Members
  • Posts

    1
  • Joined

  • Last visited

Posts posted by Mehrus

  1. 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

×