Return handle from end method

Author: inokawa

src/hooks/useAnimation.ts

@@ -26,7 +26,7 @@ export type AnimationHandle = {
   setPlaybackRate: (
     rate: number | ((prevRate: number) => number)
   ) => AnimationHandle;
-  end: () => Promise<void>;
+  end: () => Promise<AnimationHandle>;
   ref: RefObject<any>;
 };
 
@@ -108,7 +108,7 @@ export const useAnimation = (
         handle._setRate(getAnimation(), rate);
         return externalHandle;
       },
-      end: () => handle._end(getAnimation()),
+      end: () => handle._end(getAnimation()).then(() => externalHandle),
       ref,
     };
     return [

src/hooks/useAnimationFunction.ts

@@ -17,7 +17,7 @@ export type AnimationFunctionHandle = {
   setPlaybackRate: (
     rate: number | ((prevRate: number) => number)
   ) => AnimationFunctionHandle;
-  end: () => Promise<void>;
+  end: () => Promise<AnimationFunctionHandle>;
 };
 
 export type ComputedTimingContext = Required<
@@ -108,7 +108,7 @@ export const useAnimationFunction = (
           handle._setRate(getAnimation(), rate);
           return externalHandle;
         },
-        end: () => handle._end(getAnimation()),
+        end: () => handle._end(getAnimation()).then(() => externalHandle),
       };
       return [
         externalHandle,

stories/hooks/useAnimationController.stories.tsx

@@ -183,10 +183,8 @@ const Block = ({ i, length: n }: { i: number; length: number }) => {
   useEffect(() => {
     const run = async () => {
       animate.cancelAll();
-      await animate.get("one").play().end();
-      animate.get("one").cancel();
-      await animate.get("two").play().end();
-      animate.get("two").cancel();
+      (await animate.get("one").play().end()).cancel();
+      (await animate.get("two").play().end()).cancel();
       await animate.get("three").play().end();
       run();
     };