Jump to content
Search Community

animate the main component after loader animation

Sherlok test
Moderator Tag

Recommended Posts

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 :)

 

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...