foku v4.5.1

Motivation

The current version of the upstream package - animejs@3.2.1 does not seem to be getting any new development presumably because it is fairly stable and because all efforts are focused on rewriting the library for its next major version.

This fork is aimed at introducing small non-breaking bug fixes and improvements until they are ported upstream or until this project develops into anything bigger.

Note: please refer to upstream documentation for everything other than Foku-specific features - which are documented below.

Getting started

Using a package manager

1. Install the package:

   $ npm install --save foku

2. Import as a ES6 module:

   import { foku } from 'foku';

3. Or import as a UMD (CJS) module:

   const { foku } = require('foku');

Downloading the source

Download the minified bundle from here, and add the following script to your HTML:

<script src="foku.min.js"></script>

Using a CDN

Just add the following to your HTML:

<script src="https://unpkg.com/foku@latest/lib/foku.min.js"></script>

Features

timeline.label()

Attach labels to specific times along a foku.timeline().

These labels can represent an absolute offset, or an offset relative to another lebel in the same timeline.

Example:

foku
  .timeline()
  .label({ name: 'one', offset: 2000 }) // add absolute labels
  .label({ name: 'two', offset: '-=1000', reference: 'one' }) // add relative labels
  .label({ name: 'three', offset: '+=1000', reference: 'one' })
  .label({ name: 'four', offset: '*=2', reference: 'one' })
  .add({ targets, keyframes }, null, 'one') // reference labels in your animations
  .add({ targets, keyframes }, '-=1000', 'one') // offset animations relative to a label
  .add({ targets, keyframes }, 8000, 'one'); // absolute offsets take precendence over labels when both are specified