looop.js

This is a lightweight timeline based animation library focused on creating loops. You can define as many tracks as you like with different durations and delays. Each will individually loop seamlessly. Eventually all tracks will seamlessly loop back to the beginning at the same time based on the Lowest common multiple of their duration.

This library was heavily inspired by demoloops, and it had a lot of help from the author s-ol too.

Please have a play, log any issues or requests, and contributions are always welcomed.

Installation

npm i looop.js

or use without a bundler

<script src="https://unpkg.com/looop.js"></script>

Demos and Docs

Coming soon...

Code example

Please take a look in the docs folder to see the code for the demos. They're currently built in React for ease, and the examples are using HTML and SVG as the output. There's nothing stopping this from working with vanilla JS or any JS framework, and outputting to Canvas/WebGL. More examples coming soon!

import { TimelineLoop } from 'looop.js';
import { quadInOut } from 'eases';

const timeline = new TimelineLoop();

timeline.addTrack({
  id: 'uno',
  duration: 5000,
  delay: 0.2,
  segments: [
    {
      position: 0,
      value: 0.1,
      ease: quadInOut
    },
    {
      position: 0.3,
      value: 0.7,
      ease: quadInOut
    },
    {
      position: 0.5,
      value: 0.6,
      ease: quadInOut
    },
    {
      position: 0.8,
      value: 0.8,
      ease: quadInOut
    }
  ],
  onUpdate: ({ value, currentTime }) => {
    $element.style.transform = `translateX(${value}px)`;
  }
});