DettaglioStudio

What's the best way to update gsap scrolltriggers if the page has size changes? Problem: I have a site in nuxt.js 2 and animations with gsap scrolltrigger. The problem is that on the site there is an "FAQ" section with collapsing bootstrap cards (typical question-answer). If you open one of these cards, the height of the DOM page obviously becomes greater and if you continue to scroll the site the scrolltrigger animations will be triggered on the height of the old DOM (not updated with the height of the open card). Solution I found but I don't like: Detect the click on the FAQ card, it takes about 200ms to open and I put a method that after clicking on the card, with a setTimeout waits 210ms and then updates with scrolltrigger.refresh() I was wondering if there was a better best practice...

It doesn't work indeed, it makes things worse ... I can't create a mini demo on codepen because the bugs concern the mobile and through the developer tools it works (responsive mode), that's what I don't understand, only when you open it from mobile has problems. If you want i can send you in private the repo link and than write here the solution for the comunity.

I don't know if it's a bug or because I'm not familiar with scroll triggers yet. I am developing a site in Nuxt2 and using scorltriggers to animate the input and output text. Using the property "markers: true" I noticed that on mobile (chrome and safari for mobile) both have bars above and below that as soon as you scroll they get smaller and consequently the viewport changes and moreover if it changes quickly scrolling all the elements do chaos and do not respect the logic of the codepen code. How can I solve the problem?

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

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?

Ty sooooo Much! ❤️

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.