Add onFrame and onAnimationComplete callbacks to useGravity.

CHANGELOG.md

@@ -7,6 +7,16 @@ All notable changes to this project will be documented in this file. If a change
 
 The format is based on Keep a Changelog.
 
+## v0.4.1
+
+In this release, we expose the `onFrame` and `onAnimationComplete` APIs for the `useGravity` hook. These were accidentally missed in the v0.4.0 release 😱.
+
+### Fixed
+
+- Ensure `onFrame` and `onAnimationComplete` supplied to `useGravity` are picked up and applied in the lifecycle of an animation. PR by @parkerziegler [here](https://github.com/FormidableLabs/renature/pull/67).
+
+[Diff](https://github.com/FormidableLabs/renature/compare/v0.4.0...v0.4.1)
+
 ## v0.4.0
 
 In this release, we add a few new APIs to `renature` to fix some pain points identified by community members. The most notable of these are `onFrame` and `onAnimationComplete` callbacks that can be provided to `renature` hooks.
@@ -31,6 +41,8 @@ Now, you can just call `controller.stop()`. This codifies and simplifies the API
 
 - **Breaking Change** The `immediate` flag was renamed to `pause` and the logic behind it is now inverted. If `pause` is set to `true`, the animation will not start running until `controller.start` has been called or if the component re-renders and `pause` evaluates to `false`. PR by @parkerziegler [here](https://github.com/FormidableLabs/renature/pull/62).
 
+[Diff](https://github.com/FormidableLabs/renature/compare/v0.3.0...v0.4.0)
+
 ## v0.3.0
 
 In this release, we add support for using `renature` in Node.js environments for server-side rendering. Previously, using `renature` in server-rendered React applications would result in a runtime error.

src/hooks/useGravity.ts

@@ -21,6 +21,8 @@ export const useGravity = <M extends HTMLElement | SVGElement = any>({
   pause = false,
   delay,
   infinite,
+  onFrame,
+  onAnimationComplete,
 }: UseGravityArgs): [{ ref: React.MutableRefObject<M | null> }, Controller] => {
   /**
    * Store a ref to the DOM element we'll be animating.
@@ -46,6 +48,11 @@ export const useGravity = <M extends HTMLElement | SVGElement = any>({
           if (ref.current) {
             ref.current.style[property as any] = `${value}`;
           }
+
+          if (onFrame) {
+            const progress = position[0] / config.r;
+            onFrame(progress);
+          }
         });
       },
       onComplete: () => {
@@ -58,10 +65,14 @@ export const useGravity = <M extends HTMLElement | SVGElement = any>({
             ref.current.style[property as any] = values.to;
           }
         });
+
+        if (onAnimationComplete) {
+          onAnimationComplete();
+        }
       },
       infinite,
     });
-  }, [from, to, config, infinite]);
+  }, [from, to, config, infinite, onFrame, onAnimationComplete]);
 
   React.useLayoutEffect(() => {
     // Declarative animation - start immediately.