second component doesn't have time to render

[Sherlok]

Hello,

I have the same principle as in this example https://codesandbox.io/s/wizardly-cherry-3qep3i?file=/src/App.js except that before secondComponent I have a loooong list of divs with images. So, when I try to target the class in secondComponent the render doesn't happened yet, so the target class in second component can't be found. In this example it happened faster due to just the one div before secondComponent. So, what is the primary approach to do it?

[Rodrigo]

Hi,

 

I'm a bit lost here. Everything in the sandbox example is working as expected, maybe I'm missing something? 🤷‍♂️

 

I even updated the dependencies (you have React 17 and GSAP 3.11.3) and everything works the way is supposed to. Keep in mind that in React child component are rendered first, so by the time the effect hook runs in the parent component, the child component has been rendered already. So technically there is nothing wrong with the approach you have in place.

 

My best guess is that something else in your setup could be causing this problem. Maybe if you want to animate the box and then the texts in the child component, use a timeline for that:

gsap.timeline()
  .to(".box", { rotation: "+=360" })
  .to(".secondContainer h1", {
    autoAlpha: 1,
    duration: 3,
    stagger: 0.2,
    yPercent: 0,
  });

Hopefully this helps.

Happy Tweening!