Magical-motion NPM

Magical Motion 👟

Mount And Unmount Your React Component In A More Magical Way

Installation

Install magical-motion with npm

  npm install magical-motion

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`	allows to render `<Motion/>` component as any html element or a custom react element	Required. `false`
`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>