Fy-animate NPM

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

demo1

demo2

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

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

The code of the example is in fy-animate.

animate js ts

@infinitebrahmanuniverse/nolb-fy @everything-registry/sub-chunk-1715

2 years ago

2 years ago

2 years ago

2 years ago