Jump to content
GreenSock

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

ScrollTrigger refresh with dynamics values

Recommended Posts

Hello everyone,

I'm super glad to work with scrollTrigger, it's a very powerful tool. On the other hand, I can't manage a situation :

 

In a modular page I might have several parts with an horizontal scroll. In order to animate these parts I'm doing this (and it works like a charm) :

 

// each time there an horizontal scroll
document.querySelectorAll('.carousel').forEach(carou => {
			
  // calculating the width of the section
  const translate = carou.querySelector('.innerCarou').clientWidth - window.innerWidth;

  gsap.to(carou.querySelector('.innerCarou'), {
    x: -1 * translate + 'px',
    ease:"power1.inOut",
    scrollTrigger: {
      trigger: carou,
      start: 'top top',
      end: '+=' + translate + 'px',
      pin: true,
      scrub: true
    }
  })
})

 

But it happens that the width of my horizontal scroll changes. So I'm calling the ScrollTrigger.refresh() method to update all my scrollTriggers.
Unfortunately,  my variable translate is not updated so my gsap is not correctly working. How can I manage to update both my gsap and its variables ? 

Thanks a lot

 

Link to comment
Share on other sites

Hey @Michael31

 

You'll want to use invalidateOnRefresh: true on your ScrollTrigger alongside functional-values.

 

This is an example of mine that shows how you could do it - check getToValue() 

 

Hope it helps.

 

See the Pen dyvygmj by akapowl (@akapowl) on CodePen

  • Like 1
Link to comment
Share on other sites

Damn it looks cool ! 

So basically, when the ScrollTrigger.refresh() method is called, the getToValue() function is called too so the x: value is recalculated right ?

And this won't be possible without the invalidateOnRefresh attribute set to true, double right ?

 

I'm amazed with this solution, I'm gonna try it.

Link to comment
Share on other sites

19 hours ago, Michael31 said:

So basically, when the ScrollTrigger.refresh() method is called, the getToValue() function is called too so the x: value is recalculated right ?

 

19 hours ago, Michael31 said:

And this won't be possible without the invalidateOnRefresh attribute set to true, double right ?

 

Right and right;

The invalidateOnRefresh makes sure the old values for the animation get flushed (invalidated) in the first place

 

Just storing the values in a variable beforehand, would only populate it once on load though, so even if you had invalidateOnRefresh set to true but would just refer to that variable (even if you make the x-property a functional-value), ScrollTrigger would still be working with the old values. If you make it a function it can be called on every refresh and will get the fresh values then.

 

The way I understand it, technically it would probably be more like the x-property function(al-value) calling the other function, so invalidateOnRefresh and the functional-value are what's most important here.

 

For example, as long as you used invalidateOnRefresh and a functional-value for the x-translate, you could also just feed the x-property-functional value directly with the values it is supposed to get from scratch, like in the example below. Hope that doesn't confuse more than it clears things up 😅

 

See the Pen 7b10f3289b093af69db4b9f2fa11b07d by akapowl (@akapowl) on CodePen

  • Like 4
Link to comment
Share on other sites

I got it !
I learnt a lot here. Thank you very very much for your time and your precious explanations 💥

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