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 🙏

© 2022 – Pkg Stats / Ryan Hefner

tweenkle

v0.2.2

Published

Lightweight tweening library for all your tweening and animation needs.

Downloads

2,213

Readme

tweenkle ✨

Lightweight tweening library built for modern Javascript environments that favor small modular components over heavy monolithic bundled libraries.

In addition to the Tween class, this library contains all of the Robert Penner easing equations as direct exports for each variation, allowing you to use them in your site or app, without all the overhead of having to load the entire library. More information on the available eases is available below.

Why?

Might as well get this out of the way early, since I’m sure a lot of people will say, "Why the [email protected]€k did you bother to write another tweening library, THERE ARE SO MANY!!!!1!!1!". Well, you’re right, I didn't have to write this, and there are plenty of options out there, but this is part a personal exercise, while also being the library that I need 90% of the time and is setup to work nicely in ES6 environments.

Install

Via npm

npm install --save tweenkle

Via Yarn

yarn add tweenkle

Requirements

Being that this library is targeted towards modern environments, it assumes that the browsers running this code support requestAnimationFrame. If you need to support browsers that don’t support that, be sure to include a polyfill so that this will work in those browsers.

How to use

Tween

Parameters

  • start - Initial value you would like to tween from.

  • end - Target value to tween to. Once reached, the tween completes.

  • duration:Number - How long the tween will run for in milliseconds. (Default: 1000)

  • ease:Function - Easing function/equation used to manipulate the value while tweening. (Default: Linear)

  • delay:Number - Currently not implemented, but exploring how this could be used. (Default: 0)

Properties

  • active:Boolean - Whether or not the instance is tweening.

  • complete:Boolean - Whether or not the tween has completed.

Methods

  • start() - Start the tween.

  • stop() - Stop the tween.

Events

  • tick - Fired while the Tween is tweening.

  • complete - Fired when the tween completes.

Example

import Tween, { Easing } from 'tweenkle';

const tween = new Tween({
    start: 0,
    end: 100,
    duration: 1000,
    ease: Easing.Quad.InOut,
  });

tween.on('tick', ({start, end, duration, progress, ease, value}) => {
  // Manipulate element or variable based on tween value
});

tween.on('complete', ({start, end, duration, progress, ease, value}) => {
  // Tween is done, do whatever you want here, or not. Events are optional.
});

tween.start();

Easing

For the visual people out there, I wrote a quick easing visualizer so you can preview what the easing equation looks like before you use it.

  • Back

    • Back.In
    • Back.Out
    • Back.InOut
  • Bounce

    • Bounce.In
    • Bounce.Out
    • Bounce.InOut
  • Circ

    • Circ.In
    • Circ.Out
    • Circ.InOut
  • Cubic

    • Cubic.In
    • Cubic.Out
    • Cubic.InOut
  • Elastic

    • Elastic.In
    • Elastic.Out
    • Elastic.InOut
  • Linear

  • Quad

    • Quad.In
    • Quad.Out
    • Quad.InOut
  • Quart

    • Quart.In
    • Quart.Out
    • Quart.InOut
  • Quint

    • Quint.In
    • Quint.Out
    • Quint.InOut
  • Sine

    • Sine.In
    • Sine.Out
    • Sine.InOut

License

MIT © Ryan Hefner