fy-animate

A simple patch animation running in the browser

Install with npm, or Yarn:

# via npm
npm install fy-animate --save

# or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`)
yarn add fy-animate

Usage

    import Animate from 'fy-animate';
    const div = document.querySelector('div');
    const animate1 = new Animate(div);
    // const animate2 = new Animate(div);

    animate1.start('left', 500, 2000, 'linear');
    // animate2.start('top', 400, 2000, 'easeInOut');

Params

| Property | Type | Required? | Description | |:---|:---|:---:|:---| | propertyName | String | ✓ | DOMRect(Attributes included in Element.getBoundingClientRect()) | | endPos | Number | ✓ | Target location | | duration | Number | ✓ | Total duration of animation | | easing | String/Function | ✓ | Easing function.Or a string from ['linear', 'easeIn', 'easeOut', 'easeInOut', 'strongEaseIn', 'strongEaseOut', 'sineaseIn', 'sineaseOut']| | unit | String | | Unit of propertyName with the default value: 'px' |

Example

To see an example of the code running, follow these steps:

1. Clone the repo, https://github.com/strivefighting/fy-animate.git
2. cd examples
3. npm install
4. npm run dev
5. Open http://localhost:8080

The code of the example is in fy-animate.