diff --git a/CHANGELOG.md b/CHANGELOG.md index 5798438..84c77e1 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/src/hooks/useGravity.ts b/src/hooks/useGravity.ts index eb80e75..1f1c6ca 100644 --- a/src/hooks/useGravity.ts +++ b/src/hooks/useGravity.ts @@ -21,6 +21,8 @@ export const useGravity = ({ pause = false, delay, infinite, + onFrame, + onAnimationComplete, }: UseGravityArgs): [{ ref: React.MutableRefObject }, Controller] => { /** * Store a ref to the DOM element we'll be animating. @@ -46,6 +48,11 @@ export const useGravity = ({ 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 = ({ 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.