Bug on width resize caused by collapse element

[DettaglioStudio]

Hi guys I'm new to gsap so if the question is trivial forgive me.

I am using gsap for a nuxt project. I integrated some animations using the code found in the codepen I linked.

 

But there is a small bug.

If the page is resized (for example with card collapse for FAQ), the animation works badly and does not refresh with the new x and y positions of the elements.

See the Pen pojzxwZ by GreenSock (@GreenSock) on CodePen

[Cassie]

Hey there!

 

This isn't a bug, it's just how ScrollTrigger works. We have to call refresh when the height of the page changes in order to update the trigger positions

https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()

It gets called automatically when the browser changes size, but if you're adjusting something yourself - e.g. adding more content or toggling the height of a section you'll have to call it yourself.

Hope this helps!

[DettaglioStudio]

1 hour ago, Cassie said:

Hey there!

 

This isn't a bug, it's just how ScrollTrigger works. We have to call refresh when the height of the page changes in order to update the trigger positions

https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()

It gets called automatically when the browser changes size, but if you're adjusting something yourself - e.g. adding more content or toggling the height of a section you'll have to call it yourself.

Hope this helps!

Ty sooooo Much! ❤️ 

[DettaglioStudio]

4 hours ago, Cassie said:

Hey there!

 

This isn't a bug, it's just how ScrollTrigger works. We have to call refresh when the height of the page changes in order to update the trigger positions

https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()

It gets called automatically when the browser changes size, but if you're adjusting something yourself - e.g. adding more content or toggling the height of a section you'll have to call it yourself.

Hope this helps!

The refresh works.

To make it work I had to put a setTimeout to wait for the Collapse animation to finish.

The problem now is that it generates something Tricky. It does the refresh and rightly, following the logic of the scrollTrigger if it sees elements inside the viewport it reframes them and you see them "jump".

Is there any way to refresh without triggering the animation itself?

[Rodrigo]

Hi,

 

Is really hard to find out exactly what the problem is without a live minimal demo.

 

Based on what information you have provided, I would suggest to try Prevent Overlaps and Fast Scroll End options in your ScrollTrigger instance's configuration:

https://greensock.com/3-8#preventOverlapsAndFastScrollEnd

 

If that doesn't work, then perhaps try running the update method:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.update()

 

But as I mentioned before, I'm troubleshooting blind here, since we don't really know what your setup looks like and what your code is doing.

 

Happy Tweening!

[DettaglioStudio]

https://github.com/Dimi2000/Adapto this is the repo, you can see the problem when click on a Therapy section, you see the bottom item "jump".
And a second problem is when you change page and come back in the Home, the animation on texts dosen't work. But the Scrolltrigger.getAll() exist and let me see all my scrolltigger but they are never played

[Rodrigo]

Hi,

 

I'm getting a 404 from Github on that URL. On top of that please try to create a minimal demo and not post an entire repo or production build site, that makes it really hard to debug and find issues. If you have no other choice then direct us straight to the file and section of the file that seems to be causing the problem. Is not ideal since is not something we can play around with (the idea of the minimal demo in codepen, codesandbox or stackblitz), but could help shedding some light on it.

 

Happy Tweening!