Skip to content

nmathew98/s.o.o.n

Repository files navigation

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 if initial is false 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 to animate 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
  • 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
  • transition
    • Default transitions for all animations to use
    • Animations can specify their own transition to override the defaults
  • inView
    • If true uses default inView options from motion, otherwise specify options
    • Only triggers for initial animations
  • scroll
    • If true uses default scroll options from motion, otherwise specify options
    • Only triggers for initial animations

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 and usePresence
    • If the parent component needs to know when all exit animations are finished then onExitEnd will trigger a rerender and usePresence 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
  • 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"