While working on MandalaTron I needed to distribute values along a curve. This helped achieve 2 goals.

  1. Animate shapes or properties over time. (Tween)
  2. Skew a random distribution. (Curve)

And sadly I could find no super simple JS library that provided a number of different curving strategies. So, naturally, I looked up the math and then rolled my own.

Meet TweenCurve!


// Tweens!
Tween.easeMethod(now, beginValue, valueChange, duration); // tweened value
Tween.easeInSine(20, 100, 100, 30);                       // 150
Tween.easeInOutExpo(10, 50, 10, 20);                      // 55

// Curves!
Curve.easeMethod(normalizedFloat);                        // curved value
Curve.easeOutQuint(0.9);                                  // 0.99999
Curve.easeInCubic(0.1);                                   // 0.001

Easy to integrate and use, was the main goal here. Check out the example page if you need some tweens or curves in your web or node.js project.