Sherlok Posted May 23, 2023 Share Posted May 23, 2023 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? Link to comment Share on other sites More sharing options...
Rodrigo Posted May 24, 2023 Share Posted May 24, 2023 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now