animate the main component after loader animation

[Sherlok 0 Likes (Newbie)]

Hello

 

The example is located here https://codesandbox.io/s/runtime-rgb-kdtvbj?file=/src/Loader.js

I want to start the animation in App component after the overlay animation. My guess is to wait until "DOMContentLoaded" or "load" but how to synchronize it? I tried to do setTimeout and also played with states using useState but it didn't work.

Appreciate any tips to get it to work right.

Thanks for your replies in advance, I got things right in my head after your help with my previous questions 

 

 

[Rodrigo 5,885 Likes (Superhero)]

Hi,

 

I think the best approach in this case is to use React Context to create a provider that updates a property. This property (a boolean that is set as false in the context) gets updated in the loader component once the animation is completed. You watch for changes in the App component and run a regular effect hook. Something like this in your App file:

const { loaderCompleted } = useContext(loaderContext);

useLayoutEffect(() => {
  if (!loaderCompleted) return;
  // Loader has completed, now create your GSAP Context
  const ctx = gsap.context(() => {});
  return () => ctx.revert();
}, [loaderCompleted]);

You can learn more about React Context here:

https://react.dev/reference/react/createContext

 

https://react.dev/reference/react/useContext

 

Hopefully this helps.

Happy Tweening!