pacer-js 1.0.0 → 1.0.1

package/Pacer.js

@@ -66,7 +66,6 @@ class Pacer {
 		
 		this.values = {}
 		this.n = 0
-		this._label = ''
 	
 		this.instanceIndex = Pacer.all.length
 		this.isEnabled = true
@@ -138,7 +137,7 @@ class Pacer {
 		this.keys
 		.sort( function( a, b ){
 
-			return a.timeAbsolute < b.timeAbsolute
+			return a.timeAbsolute - b.timeAbsolute
 		})
 		.forEach( function( key, i, keys ){
 
@@ -432,7 +431,7 @@ class Pacer {
 		if( keyA instanceof Key !== true ||
 			keyB instanceof Key !== true ){
 
-			console.log( 'one of the keyframes was fucked.', keyA, keyB )
+			// console.log( 'one of the keyframes was unresolved.', keyA, keyB )
 			return this
 		}
 

package/README.md

@@ -21,9 +21,16 @@ Getting you from A to B since 2025.
 
 ##  TL;DR
 
-__Pacer__ is a light-weight keyframing toolkit inspired by [Soledad Penadés](https://soledadpenades.com/)’ original [tween.js](https://soledadpenades.com/projects/tween-js/) masterpiece. List your keyframes as time / value pairs, and __Pacer__ will ✨ tween your numbers and 📞 call your callbacks. __It’s minimal__. Only does what it needs to. __It’s reliable__. We use this in our own professional projects. We found the bumps and sanded them down so you won’t have to ✔️
+__Pacer__ is a light-weight keyframing toolkit inspired by [Soledad Penadés](https://soledadpenades.com/)’ original [tween.js](https://soledadpenades.com/projects/tween-js/) masterpiece. List your keyframes as time / value pairs, and __Pacer__ will ✨ tween your numbers and 📞 call your callbacks. __It’s minimal__. Only does what it needs to. __It’s reliable__. We use this in our own professional projects. We found the bumps and sanded them down so you won’t have to ✔️ Either include the `Pacer.js` ES6 module in your codebase, or install the Node package:
+
+```shell
+npm install pacer-js
+```
+Now you’re cooking.
 
 ```javascript
+import Pacer from 'pacer-js'
+
 var p = new Pacer()
 
 .key( Date.now(), { n: 0 })
@@ -31,7 +38,8 @@ var p = new Pacer()
 
 .key( 2000, { n: 1 })
 .onKey(( e )=> console.log( '2 seconds later', e.n ))
-.onTween(( e )=> console.log( 'Ooooh!', e.n ))
+.tween( Pacer.cubic.inOut )
+.onTween(( e )=> console.log( 'Tweened values!', e.n ))
 
 .key( 2000, { n: 2 })
 .onKey(( e )=> console.log( '2 more later', e.n ))
@@ -58,18 +66,19 @@ With all the tweening and keyframing libraries already out there, why build a ne
 2. [Function chaining](#function-chaining)  
 3. [Relative _and_ absolute timestamps](#relative-and-absolute-timestamps)  
 4. [Tweening](#tweening)  
-5. [Every key / every tween](#every-key--every-tween)  
+5. [Every key, every tween](#every-key-every-tween)  
 6. [Access within callbacks](#access-within-callbacks)  
 7. [Update all instances at once](#update-all-instances-at-once)  
 8. [Updating time](#updating-time)  
 9. [Forward _and_ backward](#forward-and-backward)  
 10. [Reduce, reuse, recycle](#reduce-reuse-recycle)  
 11. [Burn it to the ground](#burn-it-to-the-ground)  
-12. [Guaranteed keyframes](#guaranteed-keyframes)  
-13. [Outside the box](#outside-the-box)  
-14. [Verbose example](#verbose-example)  
+12. [__Pacer’s__ Keyframe Guarantee™](#guaranteed-keyframe-callbacks)  
+13. [Tweening outside the box](#outside-the-box)  
+14. [A verbose example](#verbose-example)  
 
 
+<br>
 
 
 ###  Legible code
@@ -80,6 +89,7 @@ We did shorten some words, like “keyframe” → `key` and “between” → `
 
 
 
+
 ###  Function chaining
 
 Expanding on the above, a code block should read like a normal paragraph of text—one idea following another in a logical sequence. With __Pacer__ you declare a keyframe, and [chain](https://en.wikipedia.org/wiki/Method_chaining) another right onto it. Perhaps you add an `onTween` callback _between_ those keyframes. Just about every __Pacer__ method returns its own instance, so you can chain from one method to another, to another—like writing the sentences of a short story. 
@@ -180,7 +190,7 @@ Each easing equation includes its `in`, `out`, and `inOut` variants, eg. `Pacer.
 
 
 
-###  Every key / every tween
+###  Every key, every tween
 
 If you find you’re running the same callback over and over, perhaps you’d prefer to declare that just once? We’ve got you covered. Use `onEveryKey` to declare a callback that will fire on _every_ keyframe, and `onEveryTween` to do the same for all tweens. [Something borrowed, something blue. Every tween callback for you](https://youtu.be/4YR_Mft7yIM).  
 
@@ -233,23 +243,12 @@ new Pacer()
 ))
 ```
 
-
-
-
-###  Update all instances at once
-
-But how do you update an _unnamed_ instance? Under the hood, __Pacer__ keeps a reference to all created instances in its `Pacer.all` array. You can update every single instance at once by sticking this in your animation loop:
-
-```javascript
-Pacer.update()
-```
-
 And because `onKey` and `onTween` provide the same callback arguments, it’s trivial to use the same callback for both.
 
 ```javascript
 var myCallback = ( e, p )=> console.log( 
 
-	'Step:', p.keyIndex + 1,
+	'Step #', p.keyIndex + 1,
 	'value:', e.n
 )
 new Pacer()
@@ -263,6 +262,17 @@ new Pacer()
 
 
 
+###  Update all instances at once
+
+But how do you update an _unnamed_ instance? Under the hood, __Pacer__ keeps a reference to all created instances in its `Pacer.all` array. You can update every single instance at once by sticking this in your animation loop:
+
+```javascript
+Pacer.update()
+```
+
+
+
+
 ###  Updating time
 
 You’ve seen that you can update your instance with `p.update()`, or all instances at once with `Pacer.update()`. But now you’re interested in finer control of your timing. When either the class or instance `update` method is called without arguments, __Pacer__ defaults to `Date.now()`, but you are free to use any numeric progression you choose. Perhaps you want to key off of `window.performance.now()` for finer accuraccy. Or maybe you’re building a scroll-based animation and you’re substituting `scrollY` (pixels) for time. Just pass your value via update:
@@ -270,9 +280,9 @@ You’ve seen that you can update your instance with `p.update()`, or all instan
 ```javascript
 p.update( numericValue )
 ```
-Be sure you’re consistent with your units. __Pacer__ isn’t going to magically understand that you’ve used seconds to declare keyframes, but milliseconds in your `update` call. That’s on you.
+Be sure you’re consistent with your units. __Pacer__ isn’t going to magically understand that you’ve used seconds to declare keyframes, but milliseconds in your `update` call. That’s on you. And don’t use one instance for timed animations, another for scrolling animations, and then expect the global `Pacer.update()` to cater to both. 
 
-Another thing to note is that `update` expects an _absolute_ number, rather than a _relative_ one. Repeatedly calling `p.update( 1000 )` will _not_ advance your animation by one second with each call. Instead it will lock your animation at its one second mark. Relative units are enormously useful for crafting (and recrafting) keyframes, but slightly less useful within the context of synchronization. It’s taken years of building projects like this to be able to feel confident in asserting this subtlety. 
+Another thing to note is that `update` expects an _absolute_ number, rather than a _relative_ one. (That’s “absolute” as in each number represents a distance from zero, not “absolute value” as in a non-negative number. __Pacer__’s `update` is perfectly happy to accept negative values for time.) Repeatedly calling `p.update( 1000 )` will _not_ advance your animation by one second with each call. Instead it will lock your animation at its absolute one second mark. Relative units are enormously useful for crafting (and recrafting) keyframes, but slightly less useful within the context of synchronization. It’s taken years of building projects like this to be able to feel confident in asserting this subtlety. 
 
 
 
@@ -309,6 +319,7 @@ p.reset( Date.now() + 2000 )
 ```
 
 
+<br>
 
 
 ###  Burn it to the ground
@@ -332,9 +343,9 @@ Pacer.removeAll()
 
 
 
-###  Guaranteed keyframes
+###  Guaranteed keyframe callbacks
 
-We pledge to deliver all of your keyframes with a money-back guarantee. (Reminder: You have paid zero dollars for this toolkit. Donations don’t count.) By default, each keyframe has a `guarantee` Boolean set to `true` that assures `onKey` will be called when calculating the gulf between “now” and our animation loop’s prior execution. Let’s say you have keyframes spaced very close together in time—tighter than your animation loop is able to execute. In this example, our last `update` call determined that we were between Key Frame __A__ and Key Frame __B__: 
+We pledge to deliver all of your `onKey` callbacks with a money-back guarantee. (Reminder: You have paid zero dollars for this toolkit.And donations don’t count.) By default, each keyframe has a `guarantee` Boolean set to `true` that assures `onKey` will be called when calculating the gulf between “now” and our animation loop’s prior execution. Let’s say you have keyframes spaced very close together in time—tighter than your animation loop is able to execute. In this example, our last `update` call determined that we were between Key Frame __A__ and Key Frame __B__: 
 
 ```
  KEY       KEY       KEY       KEY
@@ -407,7 +418,9 @@ Note that for both of these, `p.keyIndex` will be _out of range_ of `p.keys` (`-
 
 ```
 if keyIndex === -1 → onBeforeAll()
+
 if keyIndex 0..keys.length-1 → onEveryTween()
+
 if keyIndex === keys.length → onAfterAll()
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pacer-js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Getting you from A to B since 2025.",
   "keywords": [
     "animation",