ScrollTrigger Resize and dynamic value

[acantoroBB]

Hello everyone, 

 

I'm using Gsap and ScrollTrigger Plugin for one of my projects and I met an issue when resizing the window. In this case I want to get the height and width of the main element of the animation ( in this example we are going to use an image) and of the window to get a ratio to set and animate the scale to cover the screen with the image. (The image is fullScreen at start and then Scaled down to be at center of our page )  So I made a function to calculate the ratio between the element and the window and apply it with a scale transform on our image element.

 

The problem is whenever we resize the window, the ratio is updated with an event listener but unfortunately we can’t succeed to update it on the timeline. 

 

I see on other posts that to update a Timeline like this, the easiest way is to kill the timeline to rebuild it with new values to fit our needs, but in a case of resize it may be a painful payload of work for the website. Also sometimes when the page is refreshed, Scrolltrigger don’t position the element the way i expect, we can note that happens more frequently on Devices (mobile & tablet) So how could i make an animation Timeline which i can update on the resize without killing it every time, and without breaks ?  

 

The actual page with this animation already have lots of animations and it would be very nice to have an optimized way to do this.

 

Thank you in advance for the help (and happy tweening). 

See the Pen WNExwjd by bappla (@bappla) on CodePen

[OSUblake]

Hi acantoro,

 

You just need to add invalidateOnRefresh: true to your ScrollTriggers, and then use a function to grab the scale value.

 

  let heroTl = gsap.timeline({
    scrollTrigger: {
      invalidateOnRefresh: true
      ...
    }
  });
  heroTl
  	...
    .to(imageEl, { scale: getScale });

 

[acantoroBB]

Wow, it's seems to work well now.

Thank you for your very fast reply.