React-flying-item NPM

react-flying-item

Npm Library to make the selected item image seem to fly to top left corner (e.g: fly to cart icon)

Demo CodePen

Example Gif

Install

npm install --save react-flying-item

Customizable values props

Field Name	Type	Required/Optional	Default value	Details
targetTop	`String`	Optional	'5%'	By default, animation ends in the top 5%
targetLeft	`String`	Optional	'5%'	By default, animation ends in the left 5%
customAnimation	`String`	Optional	'' (e.g: 20%{translate:80% 80%;})	customizing the animation from 1% to 99%
animationDuration	`Int`	Optional	0.9	By default, animations takes 0.9s to finish
flyingItemStyling	`Object`	Optional	{ borderRadius: '4rem', width: '8rem' }	Custom style the flying item

Main Behavior Points

Animation period is 900 ms
Animation ends with Opacity 0
Position is Fixed and values of top and left are reset from event mouse clientX,clientY to 5%,5%

Usage

import React from 'react'
import FlyingButton from 'react-flying-item'

const App = () => {
  return (
    <div>
      <img src='[src-url]]' alt='' />
      <FlyingButton src='[src-url]'>fly</FlyingButton>
    </div>
  )
}

export default App