updated-react-flying-item

1.0.2 • Public • Published

react-flying-item

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

NPM JavaScript Style Guide Bundle Size Downloads PRs Welcome

Demo CodePen

Example Gif

Install

npm install --save updated-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

Package Sidebar

Install

npm i updated-react-flying-item

Weekly Downloads

12

Version

1.0.2

License

MIT

Unpacked Size

14.5 kB

Total Files

6

Last publish

Collaborators

  • temiyores