Animation

Spark provides functions and classes for standard UI animation and creating custom sequences of smooth general HTML element animation.

Animation

Spark provides an Animation object with methods for easily animating elements with standard animations included with Spark. All animations animate forwards with a custom cubic-bezier easing to create a nice smooth feel.

Standard Animations

Animation.fadeIn(element, duration = 300)

Animation.fadeOut(element, duration = 300)

Move up in or out of place while fading in/out

Animation.fadeInUp(element, duration = 1000)

Animation.fadeInLeft(element, duration = 1000)

Animation.fadeInRight(element, duration = 1000)

Animation.fadeOutDown(element, duration = 1000)

Animation.fadeOutLeft(element, duration = 1000)

Animation.fadeOutRight(element, duration = 1000)

Misc

Animation.focusIn(element, duration = 300)` // Unblurs and fades in.

Animation.blurOut(element, duration = 300)` // Blurs and fades out.

Animation.shrink(element, duration = 1000)` // Scales down to being hidden.

Animation.grow(element, duration = 1000)` // Scales from being hidden.

Animation.rotate(element, duration = 1000, iterations = 1)` // Spins 360 degrees.

Animation.flip(element, duration = 500)` // Flips the element horizontally

Animation.shake(element, duration = 1000, iterations = 1)` // Shakes from left and right.

Animation.bounce(element, duration = 500, iterations = 1)` // Bounces a few times then stops.

The animate() Method

You can also create your custom animations that the standard methods use to achieve their animations.

Animation.animate(element: HTMLElement, keyframes: Keyframe[], duration = 1000, iterations = 1);

It uses JavaScript's Animations API keyframe format using an array.

The animations created using this method will also use the same configuration to give your animations a smooth feel and retain the changes made in the animation.

Transition Element State

Spark provides a function for animating the transition of the state of an element to a new state. It fades out the element and then awaits a provided handler function, then fades the element back in.

await refreshElement(element, async (element) => {
    // Change element...
});

element is passed to the handler function to allow for generic update functions:

await refreshElement(element, updateSomethingGeneric);

Scenes & Actors

Spark provides animation classes that extend the Animation object to create sequences of element animation.

Actors

The Actor class is an abstraction of Animation.animate(...) for a sequencing context. Its constructor has the same signature. An Actor is meant to play a part in a Scene.

const actor = new Actor(element: HTMLElement, keyframes: Keyframe[], duration = 1000, iterations = 1);

Scenes

The Scene class accepts Actor arguments.

const myScene = new Scene(actor, ...Actor[]);

A Scene can then be play()'d. This will then play each Actor's animation synchronously.

myScene.play();

Playing an individual Actor's animation is also still possible.

actor.play();