How can I prevent the animation from stopping until it reaches its last frame onPointerLeave?

Question

I have an element that triggers a specific animation when I hover over it. However, currently, the animation stops as soon as my pointer leaves the element. I would like the animation to continue playing until it reaches its last frame, rather than stopping when the mouse leaves the element. How can I achieve this?

<mesh
    name="rond-ui-item-01"
    geometry={nodes["rond-ui-item-01"].geometry}
    material={materials["Material.019"]}
    position={[-4.194373, 6.492984, 18.510574]}
    rotation={[0, 0, -Math.PI / 2]}
    scale={1.096397}
    onPointerOver={() =>
        (actions["UX-penceil-item_anim"].play().paused = false)
    }
    onPointerLeave={() =>
        (actions["UX-penceil-item_anim"].play().paused = true)
    }
/>

score 0 · Answer 1 · answered Aug 29 '23 at 14:32

If you want to play the animation until the end, even if the mouse leaves the mesh, simply remove the onPointerLeave event listener.

<mesh
    onPointerOver={() =>
        (actions["UX-penceil-item_anim"].play().paused = false)
    }
  //  onPointerLeave={() =>
  //      (actions["UX-penceil-item_anim"].play().paused = true)
  //  }
/>

and also depending on how you want to end the animation, you can play with loop and clampWhenFinished.

How can I prevent the animation from stopping until it reaches its last frame onPointerLeave?

1 Answers1