Scroll trigger refresh issue

[Arel]

Hi! I am working with an angular application and I have 3 components with scroll trigger animations.
So 3 animations in total:
1 - Scroll trigger that pins an image to the scroll (given in the app.component.ts file)
2 - Scroll trigger that pins a text to the scroll and zooms out (given in the hello.component.ts file)
3 - Scroll trigger that increases the height of a div element when the scroll reaches the beginning of the element (given in the footer.component.ts file)

The problem I am having is that the 3rd animation is not working correctly when I set the pin to true in animations 1 and/or 2. Somehow it looks like the trigger start of the 3rd animation (footer) is miscalculated so it does not execute when it is supposed to. I have been fighting a lot with it and I don't understand what the issue is.  I have developed a stackblitz example to replicate the issue: https://stackblitz.com/edit/angular-ivy-tfumhf?file=src/app/footer.component.ts 

I would really appreciate your help! thanks a lot

[ZachSaucier]

Hey Arel. I answered pretty much the same question yesterday:

Most likely the easiest solution is to use refreshPriority to set the load order of your ScrollTriggers. The higher the priority, the sooner it will be loaded in order.

[Arel]

Nice! Thanks for you help, it worked like a charm