easing-fns

Easing Functions 🚀

Usage no npm install needed!

<script type="module">
  import easingFns from 'https://cdn.skypack.dev/easing-fns';
</script>

README

easing-fns

Easing Functions 🚀

Installation

NPM

npm i easing-fns --save

CDN

<script src="https://unpkg.com/easing-fns@latest"></script>

Usage

import { linear } from 'easing-fns'

// or
import * as easings from 'easing-fns'
const { linear } = easings

<script>
  const linear = easingFns.linear
</script>

Example

import { linear } from 'easing-fns'

animate(linear, (value) => {
  // some code
}, 1000)

function animate(easing, draw, duration) {
  const start = performance.now()

  requestAnimationFrame(function tick(time) {
    const
      timeFraction = Math.min((time - start) / duration, 1),
      value = easing(timeFraction)

    draw(value)

    if (timeFraction < 1) requestAnimationFrame(tick)
  })
}

Functions

preview