This package has been deprecated

Author message:

moved to steel-scene

BlueUnicorn

Animation devtools for production code

Features

• Create animations using plain HTML or JSON
• Zero config

Why use BlueUnicorn?

• Build animations without thinking about specific frameworks

Power this project up with 🌟s, ^ star it please.

Setup

Setup for use in the browser

Include this script

<script src="https://unpkg.com/blue-unicorn/dist/blue-unicorn.min.js"></script>

Setup for bundling (or if you want typings for TypeScript)

npm install blue-unicorn --save

Getting Started

There are two different ways to build out animations with BlueUnicorn. The most straightforward way is writing it as HTML before the page loads

<div id="box1">BOX 1</div>

<scene name="boxes">
    <state name="hiddenLeft" default>
        <target ref="#box1" opacity="0" x="-50px" />
    </state>
    <state name="reset">
        <target ref="#box1" opacity="1" x="0" />
    </state>
    <transition easing="ease-out" duration="250" default />
</scene>

In the example, we have a boxes scene which will start in the hiddenLeft state.

• The scene contains two states, hiddenLeft and reset. hiddenLeft is marked as the default.
• Each state modifies the opacity and x property of #box1.
• The default transition instructs the animation engine to transition for 250 milliseconds and move along an ease-out curve.

Here is an example of how to do the same thing using JSON:

const json = {
    boxes: {
        states: {
            hiddenLeft: {
                default: true,
                targets: [
                    { ref: '#box1', opacity: '0', x: '-50px' }
                ]
            },
            reset: {
                targets: [
                    { ref: '#box1', opacity: '1', x: '0' }
                ]
            }
        },
        transitions: {
            _: {
                {  default: true, easing: 'ease-out', duration: 250 }
            }
        }
    }
};
bu.importJSON(json);

To transition from one state to another:

// transitions to reset
bu.transition('boxes', 'reset');

To transition between multiple states, keep adding more state names:

// transitions to reset and then to hidden-left
bu.transition('boxes', 'reset', 'hiddenLeft', ...);

To move directly to a state without a transition:

// go directly to reset, do not pass GO, do not collect $200
bu.set('boxes', 'reset');

Here are some other handy functions

// resets all scenes to their starting state
bu.reset();

// import new scenes from an element
bu.importHTML(element);

What's next?

Get a simple prototype working and posted. Stay tuned!

Contributions

Contributions and issues are very welcome :) Make sure to put in an issue with your intent before doing a Pull Request.