Problem when using react hook useGSAP, scrollTrigger and dynamic height

[tis_cake]

Hello! I encountered a problem when I was using the useGSAP hook for React, scrollTrigger, and content with dynamic height.
 

The situation is as follows: somewhere on the page, we have a component with dynamic height, in this particular case we have tabs with their own content. Just below, there are expanding accordions. The height of the content in the tabs and accordions can vary. Further down the page, there is a block with GSAP animations (there will be several of them), which uses the React useGSAP hook.
 

I have encountered 2 problems. The first problem is that, for example, the block with animation is not updated while opening an accordion. This can be clearly seen in this example - it contains the necessary minimum to see the error. When clicking on the accordion toggler, the animation start label remains in the same place. When scrolling to it with the accordion open, the animation fails.

 

The second issue is related to passing dependencies into the useGSAP hook. If I understand correctly, one of the solutions to my problem is to pass the height of, for instance, the body tag as a dependency. When the accordion is expanded, the height of the body changes - and at this stage, do I need to update the animation?

When passing this value into the dependencies array, the animation fails even with the accordion closed.

Would u mind helping me with the understanding of the direction in order to solve this problem? I'm convinced I'm doing something wrong?

 

 

See the Pen OJGxdVG by tis-cake (@tis-cake) on CodePen.

[Rodrigo]

Hi,

 

This is related to the fact that you need to tell ScrollTrigger to update the calculations it made in order to accommodate to the new dimensions of the DOM:

See the Pen wvZPKqd by GreenSock (@GreenSock) on CodePen.

 

In the demo I'm updating a single ScrollTrigger instance, so I just reference that. The issue in your current setup is to tell from one component to another that the element has been expanded or collapsed. You can use the same approach, but if you have more ScrollTrigger instances on your page you can use the global refresh method that will refresh all the ScrollTrigger instances that are active at that point in your app:

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

 

Hopefully this helps.

Happy Tweening!

[tis_cake]

Thank you very much, your decision has helped me a lot!