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

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