https://github.com/francisrstokes/primer-js

🕰 A tiny (474 bytes minified + gzipped) library for creating normalised, unit independent timelines
https://github.com/francisrstokes/primer-js

Last synced: 14 days ago
JSON representation

🕰 A tiny (474 bytes minified + gzipped) library for creating normalised, unit independent timelines

• Host: GitHub
• URL: https://github.com/francisrstokes/primer-js
• Owner: francisrstokes
• License: mit
• Created: 2020-07-08T14:52:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-03-27T02:33:36.000Z (over 2 years ago)
• Last Synced: 2024-04-16T01:08:11.144Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 43 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# primer-js

**primer-js** is a tiny (474 bytes minified + gzipped) library for creating normalised, unit independent timelines, for use in programatic animation.

## API

[See docs.](./docs.md)

## Example

```javascript

const {timeline, timelineEvent} = require('primer-js');

const tl = timeline([

  // event "a" has a duration of 100 time units

  timelineEvent("a", { duration: 100 }),

  // event "b" lasts for 300 time units, but is delayed by 200

  timelineEvent("b", { duration: 300, preWait: 200 }),

  // event "c" lasts for 200 time units, and uses a custom expoential easing function

  timelineEvent("c", { duration: 200, ease: t => t**2 }),

]);

// Begin the timeline at t=0

tl.init(0);

// draw function is called with a a time in milleseconds as often as possible

const draw = t => {

  tl.update(t);

  // The values the timeline produces are always normalised to the inclusive range [0, 1]

  const someOpacityValue = tl.get("b").value();

};

```