@hypernym/animate

Animate

Highly-performant and lightweight JavaScript animation library.

_{Repository | Package | Releases | Discussions}

Features

• Powered by WAAPI
• Free & Open-source
• TypeScript friendly
• Supports UMD, CJS & ESM
• Fully tree-shakeable
• No dependencies
• Lightweight & Powerful
• Super easy to use

Installation

npm i @hypernym/animate

Imports

// UMD
const { animate } = window.Animate

// CJS
const { animate } = require('@hypernym/animate')

// ESM & TS
import { animate } from '@hypernym/animate'

API

🧑‍💻 🚧 🔜

The main Animate Core has a powerful feature-rich API written in TypeScript.

Also, the library has no dependencies, it is fully tree-shakeable and weights only ~7kb min.

Animate

animate(targets, options)

⚠️ Some API changes are still possible before the first stable release.

Examples

Simple

import { animate } from '@hypernym/animate'

// Moves the target horizontally from 0 to 200px

animate('.class', {
  x: [0, 200]
})

On update

import { animate } from '@hypernym/animate'

// Animates the target on each tick

animate('#id', {
  x: [0, 300],
  duration: 2,
  // progress is from 0 to 1
  onUpdate: ({ instance, target, progress }) => {
    target.innerHTML = `${Math.round(progress * 100)}%`
  },
  onComplete: ({ instance, target }) => {
    target.innerHTML = `Complete`

    console.log('The animation is complete.')
  }
})

Stagger

import { animate } from '@hypernym/animate'

// Creates a `stagger` effect, each element starts with a delay of 0.1s

animate('.el', {
  x: 300,
  delay: i => i * 0.1
})

With controls

import { animate } from '@hypernym/animate'

const el = document.querySelector('.el')

// Animates the target using the controls

const A = animate(el, {
  x: ['0%', '30%'],
  y: [0, 300],
  opacity: [1, 0.5],
  backgroundColor: '#00ff33',
  duration: 3,
  onStart: ({ instance, target }) => {
    console.log('The animation has started.')
  },
  onComplete: ({ instance, target }) => {
    console.log('The animation is complete.')
  },
  onCancel: ({ instance, target }) => {
    console.log('The animation has been cancelled.')
  }
})

setTimeout(() => {
  A.pause()
}, 1000)

setTimeout(() => {
  A.play()
}, 2000)

Roadmap

✅ Done

🚧 In development

A few things need to be completed before the first stable release:

• Add support for steps easing (custom mode for Raf) ✅
• Add the stagger (delay) ✅
• Add the sequence (timeline) with controls 🚧
• Add the interactive web docs with examples and descriptions 🚧

Community

Feel free to use the official discussions for any additional questions.

License

Developed in 🇭🇷 Croatia

Released under the MIT license.

© Hypernym Studio