Reset elapsedTime when a component conditional render

Questions
, ,
1

Hello people,
I am trying to orchestrate animation between my component but only after hours I realize that the issue is elapsedTime (it starts with the canvas and not with the lifecyle of the component) and that’s why my conditional render component jump to the final position instead of a smooth animation.

I will try to describe the context.
I have a Preloader animation that run only at the first visit (whatever page has been visited). At the end of this animation I set to true a global state variable from jotai to conditional render my <Scene /> component.
Then I have my canvas component with a conditional render of <Scene /> component.
The <Scene /> component do an animation with framer-motion (change scale and position of <group>) and at the end of the animation I set to true a local state to conditional render another component because I need to start there an animation managed in vertex shader to move particles. I thought about conditionally rendering <Particles /> component to delay the animation that would otherwise happen before it could be seen, but I did not think that elpasedTime starts from canvas rendering and not with the lifecycle of the component itself.

Some code.

Preloader component:

export default function Preloader() {
  ...
  useEffect(() => {
    const animateSequence = async () => {
      await animate(...);
      setCanRenderScene(true);
    animateSequence();
  }, [...]};

  return (...);
};

Canvas component:

export default function CanvasComponent() {

  return (
    <Canvas>
     <Suspense>
        {canRenderScene && <Scene />}
    </Suspense>
    </Canvas>
};

Scene component:

export defualt function Scene() {
  useEffect(() => {
    const animateSequence = async () => {
      await Promise.all([...]);
      setCanRunParticles(true);
    };
    animateSequence();
  }, [..]};

  return (
    <Suspense>
      {canRunParticles && <Particles />}
    </Suspense>
  );
};

In Particles I setup shaders, useFrame to update uTime for the animation, update uniforms.

To achieve deside effect (after remembering how elapsedTime works) I tried:

  1. Conditional render <Canvas /> instead of <Scene /> in the CanvasComponent`. It works (I think), but is it suitable?
  2. Stop the clock in useFrame() with clock.stop(); in the component and thenclock.start()in the` component. It does not works, so for sure I am missing something.
  3. Manual reset in <Particles /> component elapsedTime with something like that
  useFrame(({ clock }) => {
    if (visible && startTime.current === null) {
      startTime.current = clock.getElapsedTime();
    }

    if (material.current && startTime.current !== null) {
      const elapsedTime = clock.getElapsedTime();
      const localTime = elapsedTime - startTime.current;
      material.current.uniforms.uTime.value = localTime;
    }
  });

visibile is a prop pass down from the <Scene /> component. It is canRunParticles value.
startTime is a ref to store time.
It works, but I feel it is a bit hacky.

Are there other solutions? Can I reset elapsedTime so <Scene /> component can end the framer-motion animation and then <Particles /> starts the animation without jumping to end?

Hopefully I made my self clear about the issue, the context and what I am looking for.

Thank you!