npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

eases-fancy

v1.0.0

Published

This is a set of easing equations which are outside of standard Penner easing equations

Downloads

5

Readme

eases-fancy

experimental

This is a set of easing equations which are outside of standard Penner easing equations.

Usage

You can require in individual functions using require statements before or access them directly by requiring in 'eases-fancy'.

Example:

var mod = require('ease-fancy/mod');
// or by doing
var mod = require('eases-fancy').mod;

NPM

var bezier = require('eases-fancy/bezier')([opts])

bezier

Above rendering a custom bezier curve

This function will return an ease equation based on a cubic bezier curve.

It should be noted this simply wraps the cubic-bezier module to have a consistent api with the rest of the fancy eases.

Optionally you can pass in the following options:

  • points an array of four numbers which represent a cubic bezier curve default [0.21,1.08,1,-0.96]
  • precision the higher the value the more precise the curve will be default value 1000.

var points = require('eases-fancy/points')([opts])

points

Will render a series points which define an easing equation

points

This is the exact same graph as above with an elastic out ease equation added to the second keyframe

Returns a function that will perform eases based on custom points you've passed in.

Options:

  • points a two dimensional array that is formatted in the following way:
[
    [ value, time, ease ],
    [ value, time, ease ],
    [ value, time, ease ]
]

In the above arrays value is a value the interpolation amount at the time defined by time and ease is an optional ease function which will be used to to the following key frame. values's are typically between 0-1 however values less than 0 or greater than 1 are also acceptable. Optionally an ease function can be passed as the third parameter for more complex graphs.

var pointsRandom = require('eases-fancy/points-random')([opts])

random quint

The above is rendering the quint function randomized

random quint

The above is rendering 100 randomized points which for an ease equation which taper out

Options which can be passed to points-random:

  • numPoints this is how many random points you'd like to add. Default 20
  • offset this value is how offset each random point is off the original ease quation. Default 0.3
  • ease the base ease equation to randomize from. Default is a linear ease equation.

var stepped = require('eases-fancy/stepped')([opts])

stepped

Rendering with two steps

stepped expo

Rendering with two steps and ease expo

Returns an easing function for stepped eases with the following optional options:

  • steps the number of steps you'd like to have. The above is with two steps. Default value 1
  • ease an ease equation which will modify the original steps.

var quantize = require('eases-fancy/quantize')([opts])

stepped

Rendering quantize with a linear interpolated graph

stepped

Rendering quantize with a custom ease using the above mentioned points

quantize will make all values be either 0 or 1. This could be used for instance to blink on and off something.

Options:

  • ease an ease function we'd like to quantize. Default linear
  • edge a threshould value from which to either set values to 0 or 1. For instance if edge is 0.3 all values less than 0.3 will produce 0 and all values greater will produce 1. Default 0.5.

var mod = require('eases-fancy/mod')([opts])

stepped

Rendering mod with defaults. (repeats linear ease over and over)

stepped

Rendering mod with a custom ease.

mod will repeat an ease function the number of times you ask it to.

Options for mod:

  • ease ease function which will be repeated. Default linear.
  • repeat count times you'd like to repeat the ease function. Default 5

License

MIT, see LICENSE.md for details.