ease-tween

CSS-style easing and tweening in JavaScript

Usage no npm install needed!

<script type="module">
  import easeTween from 'https://cdn.skypack.dev/ease-tween';
</script>

README

ease-tween

CSS-style easing and tweening in JavaScript.

Usage

$ npm install --save ease-tween

Example

var easeTween = require("easeTween").easeTween;

function easeScrollElementX(element, x, duration, callback) {
  var startX = element.scrollLeft;
  var maxX = element.scrollWidth - element.clientWidth;
  var distanceX = Math.max(0, Math.min(x, maxX)) - startX;
  easeTween(duration, function (t) {
      element.scrollLeft = t * distanceX + startX;
    },
    callback);
}

See ease-scroll for more information.

Documentation

easeTween(duration, step, callback)

TODO

tween(duration, step, callback)

TODO

ease(t)

An exponential approximation of the default CSS transition timing function.

Absolute error
Minimum −7.085130 × 10−2
Maximum 4.759085 × 10−2
Mean 2.238834 × 10−4
Standard error of mean 4.029076 × 10−3
Median 3.505542 × 10−3
Variance 1.282443 × 10−3
Standard deviation 3.581121 × 10−2
Skew −5.665190 × 10−1
Kurtosis −7.313037 × 10−1

About

Made by Miëtek Bak. Published under the MIT X11 license.

Acknowledgments

Thanks to Robert Penner for popularising the use of easing functions.

The approximation was found with ZunZun, based on samples obtained with bezier-easing.