@b.s/s.o.o.n
v1.0.2
Published
Simple wrappers around [Motion One](https://motion.dev) for React
Downloads
51
Readme
Motion for React
Simple wrappers around Motion One for React
Loosely based on the API for Solid, have taken liberties
Usage
Motion
Renders an animatable HTML or SVG element
Wrap a component in Motion
to enable animations on them
<Motion.div>{children}</Motion.div>
Props
animate
- A target of values to animate to
- On initial render,
animate
does not run ifinitial
isfalse
or if options are not provided - On subsequent renders,
animate
runs if its options changes
initial
- If options are provided, a target of values to animate to when the element is first rendered
- If
true
animates toanimate
on initial render
exit
- A target of values to animate to when an element is hidden
- The element must be a direct child of
Presence
hover
- A target of values to animate to from
animate
when the element receives a hover event - When the element is not hovered anymore, it animates to
animate
- A target of values to animate to from
press
- A target of values to animate to from
animate
when the element receives a click event - When the element is not pressed anymore, it animates to
animate
- A target of values to animate to from
transition
- Default transitions for all animations to use
- Animations can specify their own
transition
to override the defaults
inView
- If
true
uses defaultinView
options frommotion
, otherwise specify options - Only triggers for initial animations
- If
scroll
- If
true
uses defaultscroll
options frommotion
, otherwise specify options - Only triggers for initial animations
- If
Presence
Perform exit animations
All direct children of Presence
should be Motion
and should specify a key
, direct children of Presence
which are not Motion
are filtered out
Exit animations are triggered on children when they are no longer rendered
<Presence>
{show && <Motion.div key="s.o.o.n">{children}</Motion.div>}
</Presence>
or
<PresenceProvider>
<Parent>
<Presence>{children}</Presence>
<Presence>{children}</Presence>
<Parent>
<PresenceProvider>
Props
id
- An id for the component
- Should be used with the hooks
useRegisterPresence
andusePresence
- If the parent component needs to know when all exit animations are finished then
onExitEnd
will trigger a rerender andusePresence
stores the exit animation state
initial
- Disable initial animations on all children
exitBeforeEnter
- If
true
waits until all exiting children animate out before animating in new children - Otherwise new children are animated in as exiting children animate out
- If
onExitEnd
- Callback when all exit animations have finished
Contributions
- Contributions are welcome, just make a pull request
License
See LICENSE
"Let's make something, out of nothing"