Jump to content
GreenSock

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

ScrollTrigger Resize and dynamic value

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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 });

 

  • Like 1
Link to comment
Share on other sites

Wow, it's seems to work well now.

Thank you for your very fast reply.

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