useAnimate
useAnimate
provides a way of using the animate
function that is scoped to the elements within your component.
This allows you to use manual animation controls, timelines, selectors scoped to your component, and automatic cleanup.
It provides a scope
ref, and an animate
function where every DOM selector is scoped to this ref.
Additionally, when the component calling useAnimate
is removed, all animations started with its animate
function will be cleaned up automatically.
Usage
Import from Motion:
useAnimate
returns two arguments, a scope
ref and an animate
function.
This scope
ref must be passed to either a regular HTML/SVG element or a motion
component.
This scoped animate
function can now be used in effects and event handlers to animate elements.
We can either use the scoped element directly:
Or by passing it a selector:
This selector is "li"
, but we're not selecting all li
elements on the page, only those that are a child of the scoped element.
Scroll-triggered animations
Animations can be triggered when the scope scrolls into view by combining useAnimate
with useInView
.
Exit animations
It's possible to compose your own exit animations when a component is removed using useAnimate
in conjunction with usePresence
.
This component can now be conditionally rendered as a child of AnimatePresence
.
A Motion+ membership will give you early access to features & content, access to our private Discord, and more.
It's a one-time fee that grants lifetime access. No subscription necessary!