@kilt/lumiere

Animation wrapper

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Aug 22, 2018Mar 1, 2018Minified + gzip package size for @kilt/lumiere in KB

Readme

@kilt/lumiere

Animation wrapper based on rAF (requestAnimationFrame)

npm Build Status GitHub license

npm

npm i @kilt/lumiere --save

yarn

yarn add lumiere

Usage

<script src="https://cdn.rawgit.com/kiltjs/lumiere/2449a6f3/dist/lumiere.min.js"></script>
import lumiere from 'lumiere';

var initial_scroll = document.scrollingElement.scrollTop,
    scroll_length = 100; // scroll down 100px

lumiere(400, function (progress) {

  document.scrollingElement.scrollTop = initial_scroll + scroll_length*progress;

}, function (progress) {

  // example of easeInQuad
  return progress*progress;

  // check out https://gist.github.com/gre/1650294 for more easing functions
  // also check out https://github.com/gre/bezier-easing

}).then(function () {

  // animation finished

});

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.