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

tween-ticker

v3.3.2

Published

a generic tween ticker engine

Downloads

526

Readme

tween-ticker

stable

A generic low-level ticker for tweening engines. Stacks tweens and then, on each tick, steps through them to update them to their interpolated (and eased) values.

This is the building blocks for tweenr, but can be useful on its own for modular components

Does not assume any standard set of eases, and uses linear (i.e. no ease) by default.

var Ticker = require('tween-ticker')
var ticker = Ticker()

//the thing we want tweened
var target = {
    position: [0, 0],
    opacity: 0
}

//get a new tween to the given ending state
var tween = ticker.to(target, { position: [2, 4], opacity: 1, duration: 1 })

//step the ticker by a delta time
ticker.tick(0.5)

console.log(target.position) // -> [ 1, 2 ]
console.log(target.opacity)  // -> 0.5

//optionally we can cancel the tween to stop it from running anymore
tween.cancel()

Usage

NPM

ticker = Ticker([opt])

Creates a ticker with some options:

  • eases a map of ease functions that users can pass by string in the tween options, defaults to an empty object
  • defaultEase a string or function that represents the default easing when the user does not specify one, defaults to a linear function

tween = ticker.to(tween)

If only one argument is given, this method pushes a new tween onto the stack, returning that tween for chaining. Same as ticker.push(tween).

tween = ticker.to(element, opt)

A convenience version of to() which handles the most common case: object tweening. If the second argument, opt is truthy and an object, this method creates a new object tween and pushes it onto the stack.

The tween modifies element, which can be an array of objects, or a single object. opt can be the following:

  • delay in time units, default 0
  • duration in time units, default 0
  • ease is a string (lookup for the eases passed at constructor) or an ease function, defaults to ticker.defaultEase

Any other properties to opt will be tweened if they are consistent with element and also if they are a number or an array.

var elements = [
    { x: 25, shape: [10, 5] },
    { x: 15, opacity: 0 }
]

var tween = ticker.to(elements, { 
    opacity: 1,
    shape: [5, 0],
    duration: 3,
    delay: 0.25
})

/*
    after tween is finished, element will equal:
    [
        { x: 25, shape: [5, 0] },
        { x: 15, opacity: 1 }
    ]
*/

tween = ticker.to()

If no arguments are given, this method creates an "empty" or dummy tween that can be cancelled. This is similar to the way noop functions are used to avoid conditionals in functional programming.

ticker.push(tween)

Pushes a generic tween object onto the stack. Like ticker.to(tween) but more explicit.

var array = require('tween-array')
ticker.push(array(start, end, { duration: 5 }))
    .on('complete', doSomething)

ticker.cancel()

Clears and cancels all tweens stored in this ticker. ticker.clear() is an alias for this method. Returns this for chaining.

ticker.tick([dt])

Ticks the tween engine forward by the given delta time (or 1/60 if not specified).

--

The return value of ticker.to() is a tween with the following methods:

tween.cancel()

Cancels the tween, removing it from the queue on the next tick without applying any further interpolation.

tween.on(event, func)

The returned tween is an event emitter with the following events:

  • start triggered when the tween is first started
  • cancelling triggered before the tween completes, initiating from a call to cancel()
  • complete triggered when the tween is completed
  • update triggered after the tween updates its values

License

MIT, see LICENSE.md for details.