@quietui/scurry

Scurry

Animations, easings, and utilities for use with the Web Animations API.

Built for Quiet UI.

Installation

npm install @quietui/scurry

Importing animations

To import an animation:

import { tada } from '@quietui/scurry';

Note: if you're importing directly from a browser, use the full path to prevent the entire library from loading. Make sure to replace @quiet/scurry with the path to the library, either a CDN or a local folder.

import { tada } from '/path/to/scurry/dist/animations/tada.js';
import { easeInOut } from '/path/to/scurry/dist/easings/ease-in-out.js';

Show all available animations

• back-in-down
• back-in-left
• back-in-right
• back-in-up
• back-out-down
• back-out-left
• back-out-right
• back-out-up
• bounce-in-down
• bounce-in-left
• bounce-in-right
• bounce-in-up
• bounce-in
• bounce-out-down
• bounce-out-left
• bounce-out-right
• bounce-out-up
• bounce-out
• bounce
• fade-in-bottom-left
• fade-in-bottom-right
• fade-in-down-big
• fade-in-down
• fade-in-left-big
• fade-in-left
• fade-in-right-big
• fade-in-right
• fade-in-top-left
• fade-in-top-right
• fade-in-up-big
• fade-in-up
• fade-in
• fade-out-bottom-left
• fade-out-bottom-right
• fade-out-down-big
• fade-out-down
• fade-out-left-big
• fade-out-left
• fade-out-right-big
• fade-out-right
• fade-out-top-left
• fade-out-top-right
• fade-out-up-big
• fade-out-up
• fade-out
• flash
• flip-in-x
• flip-in-y
• flip-out-x
• flip-out-y
• flip
• head-shake
• heart-beat
• hinge
• jack-in-the-box
• jello
• light-speed-in-left
• light-speed-in-right
• light-speed-out-left
• light-speed-out-right
• pulse
• roll-in
• roll-out
• rotate-in-down-left
• rotate-in-down-right
• rotate-in-up-left
• rotate-in-up-right
• rotate-in
• rotate-out-down-left
• rotate-out-down-right
• rotate-out-up-left
• rotate-out-up-right
• rotate-out
• rubber-band
• shake-x
• shake-y
• shake
• slide-in-down
• slide-in-left
• slide-in-right
• slide-in-up
• slide-out-down
• slide-out-left
• slide-out-right
• slide-out-up
• swing
• tada
• wobble
• zoom-in-down
• zoom-in-left
• zoom-in-right
• zoom-in-up
• zoom-in
• zoom-out-down
• zoom-out-left
• zoom-out-right
• zoom-out-up
• zoom-out

Importing easings

To import an easing:

import { easeInOut } from '@quietui/scurry';

Show all available easings

• ease-in-sine
• ease-out-sine
• ease-in-out-sine
• ease-in-quad
• ease-out-quad
• ease-in-out-quad
• ease-in-cubic
• ease-out-cubic
• ease-in-out-cubic
• ease-in-quart
• ease-out-quart
• ease-in-out-quart
• ease-in-quint
• ease-out-quint
• ease-in-out-quint
• ease-in-expo
• ease-out-expo
• ease-in-out-expo
• ease-in-circ
• ease-out-circ
• ease-in-out-circ
• ease-in-back
• ease-out-back
• ease-in-out-back

Using with the Web Animations API

To animate an element directly with the Web Animations API:

import { flip, easeInSine } from '@quietui/scurry';

const el = document.getElementById('my-element');

el.animate(flip, {
  duration: 1500,
  iterations: Infinity,
  easing: easeInSine
});

Attribution

• Animations are based on the timeless Animate.css library.