react-flying-item
v1.1.3
Published
NPM Library to make the selected item image seem to fly to top left corner (e.g: fly to cart icon)
Downloads
375
Maintainers
Readme
react-flying-item
Npm Library to make the selected item image seem to fly to top left corner (e.g: fly to cart icon)
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
License
MIT © Ahmed-Elswerky