Magical Motion 👟

Mount And Unmount Your React Component In A More Magical Way

Installation

Install magical-motion with npm

  npm install magical-motion

or

Install magical-motion with yarn

  yarn add magical-motion

Usage/Examples

import { useState } from 'react'
import Motion from 'magical-motion'

export const Box = () => {
    const [message, setMessage] = useState('mount animation running')
    return (
    <Motion
    key={message}
    animate={{opacity:1}}
    initial={{opacity:0}}
    onFinish={ ()=>{
        setMessage('Finished  animation')
      }}
    >{message}</Motion>
  )
}

API Reference

Bare Minimum

 <Motion 
    initial={{opacity:0}}>
    Hello world
 </Motion>

Parameter	Type	Description	Required
initial	object	the initial state of your animation, accepts any css prop, any properties here reset to animate	Required. false

Full Api

Parameter	Type	Description	Required
as	`string		custom component`
initial	object	the initial state of your animation, accepts any css prop, any properties here reset to animate prop	Required. false
animate	object	from initial state Motion component moves to animate,accepts any css prop, at the end of animation all props are set as default value	Required. false
animate	object	from initial state Motion component moves to animate,accepts any css prop, at the end of animation all props are set as default value	Required. false
configure	object	controls the feel of <Motion/> spring animation like, stiffness,or FPS	Required. false
transitions	object	controls animation properties like delay before animation start, iterations and direction	Required. false
onFinish	function	a callback function that runs after animation	Required. false

Default Configuration

  <Motion
    as='main'
    initial={{ x:0,y:0 }}
    animate={{ x:0,y:0 }}
    configure={{
      stiffness: 100,
      mass: 1,
      damping:10,
      FPS: 150
    }}
    transitions={{waitFor:undefined,direction:'normal'}}
    onFinish={()=>null}
  >
    
  </Motion>

Roadmap

• polyfill ✅

• support initial animation state ✅

• support rendered animation state ✅

• typescript support ✅

• support exit animation state ❌

• support option to generate more frames ✅

• support callback function during animation state ✅

• ability to wait till or wait until a condition is met before render ✅

TODO

• exit animation using <Precense/> component
• ability to pause animation after a certain duration
• condition to pause animation
• support exit animation state

License

MIT

Authors

• @86_Magical