incorrect loading sequence of components in Astro.js

Question

Recently I started to use Astro js. I created few react components inside astro Layout.

---
import Layout from '../widget/layout/layout.astro'
import Hero from '../components/hero/hero.tsx'
import About from '../components/about/about'
import QuestionsBlock from '../components/questions-block/questions-block'
import Cases from '../components/cases/cases'
import Reviews from '../components/reviews/reviews'
---

<Layout>
  <Hero client:only='react' />
  <About client:only='react' />
  <Cases client:only='react' />
  <Reviews client:only='react' />
  <QuestionsBlock client:only='react' />
</Layout>

Inside Cases component I've got GSAP lib with some animations with ScrollTrigger

      ScrollTrigger.create({
        animation: anim,
        trigger: '.case-wrapper',
        start: 'top 5%',
        end: '+=3000px',
        scrub: 1,
        toggleActions: 'play none none reverse',
        pin: true
      })
    })

The problem: Every time when I refresh site, Cases component loads faster than Hero or About components, and it brake my GSAP animation, animation starts from top of ALL site, not from top of Cases block (as I write in ScrollTrigger).

I need this

Now I have this

Left in console you can see console.log('componentName')

I expect that gsap will work correct