Jump to content
Search Community

ScrollTrigger.refresh(true) to reset ScrollTrigger trigger position

Jamesh test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

I have a a "click" event listener that expands some read more text. I have called ScrollTrigger.refresh(true) in that callback which is kind of working. I have a transition being applied to the height of the element of 500ms, so the refresh is slightly out when recalculating the trigger position. I read that if trueis set,  it will wait for at least one requestAnimationFrame tick, and up to roughly 200ms before initiating the refresh.

 

If I set the duration to 200ms of my transition then refresh sets the position perfectly. Is there anyway to increase/manually update the duration that ScrollTrigger.refresh(true) takes in order to allow for the transition to take place and then have the trigger position reset? 

 

Thanks 

Link to comment
Share on other sites

Hey @Jamesh

 

If you were to stick to that technique of estimating when to refresh, you could just call the ScrollTrigger.refresh() in a setTimeout or gsap.delayedCall.

 

But instead of estimating the timing of when to call the ScrollTrigger.refresh() like you seem to be doing now, it might be better to use an event for that. If you weren't aware, there is a transitionend event in JS that let's you fire things after the CSS transition of an element has finished:

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event

 

And of course you could always change the transition to a GSAP tween and call the ScrollTrigger.refresh() in an onComplete callback.

 

I hope that'll help.

 

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

  • Like 2
Link to comment
Share on other sites

Thanks for this.  I didnt know about transitionend. As I was already using GSAP I went down the GSAP tween route - much less code (12 lines versus 64 my other way!!). I also took advantage of onReverseComplete: () => ScrollTrigger.refresh(),. Thanks again.

  • Like 1
Link to comment
Share on other sites

@akapowl. So this is how far I've got with my 'read more' text. I want to be able to get the read more text to expand as the screen is resized which I've achieved but when the button is used to close the text its not as smooth as I would like . I was hoping that I might have been able to use offsetHeight as part of a resize addEventListener but the height was being set as an inline style and I couldn't get it to refresh so I have opted to set height to auto as it currently stands. The problem I have is that the animation is 'jerky' if you resize the screen with the read more section active and then click the button to see 'less about us'. Is there any way of refreshing on resize to ensure that GSAP understands the exact height of the element to ensure a smooth animation?  

Codepen URL below:

See the Pen NWyPmJb by jame5 (@jame5) on CodePen

Link to comment
Share on other sites

This doesn't really seem to be about your initial question on the refresh of ScrollTrigger anymore, so it would be great if you could create a new topic for that. Also, I don't see anything in your code that is related to resizing, so you might want to reconsider your demo for better understanding of your question.

 

As it stands now (at least for me) it is really hard to understand what exactly you might be asking. If you are asking how to make an animation continues smoothly while resizing, honestly, I really wouldn't care about that too much, since usually users don't care what it looks like during resizes but rather want a page to behave as expected after a resize.

 

I might be mis-understanding though. Nonetheless, please open a new thread.

  • 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.
×
×
  • Create New...