chrisk8er/animation-editor

Web-based animation editor and runtime written in React, Redux, PIXI.js and HTML Canvas.

Animation Editor

Overview

• Introduction
• Compositions and Layers
• Pen Tool
• SVG Import
• Array Modifiers
• Flow Editor
• Other

Introduction

The goal of this project is to become a production-grade animation suite for the web, comprised of an editor and a runetime.

The project is, and will remain, open source and free to use.

Right now this project is just the editor part of the equasion. Once the editors basic feature set reaches maturity, work on the runtime will begin.

What can I do with this right now?

Not much yet.

The core of the editor and its main features are approaching stability, but the project is still incredibly inaccessible. The learning curve is very steep and there is no way to save your changes permanently.

What I can offer you is a glimpse into the future. Take a look below and marvel at the features you may, or may not, be able to use months or years from now!

Main features

Compositions and Layers

To the people familiar with Adobe After Effects, the term "composition" will feel very natural. But for programmers and designers coming from Figma, "composition" is just another word for "component".

Compositions have a width, a height and a length. The width and height specify the display area, whilst the length specifies the number of frames in the compositions "run time".

Compositions also contain any number of layers. Right now five types of layers are supported:

• Rect
• Ellipse
• Shape
• Line
• Composition

The first four are relatively straightforward. They are the primitive building blocks that are used to create more complex graphics.

But composition layers allow us to create reusable compositions. Compositions can be nested within one another.

Barring circular references, compositions can be infinitely nested within other compositions.

Timeline

The Timeline shows you the layers within a composition, and allows you to view and modify their properties.

A layer may be animated by clicking on the stopwatch icon. The keyframes of the layer will be displayed to the right in the Track Editor. The keyframes being blue indicates that they are selected. The different shapes indicate different types of interpolation.

By clicking on the "Graph Editor" button, the Graph Editor can be viewed instead of the Track Editor. It allows for more fine-grained control over animations.

Multiple timelines can be edited at the same time by selecting multiple properties.

Pen Tool

The pen tool allows you to create shape layers with arbitrary paths.

Shape layers contain the configuration options you would expect:

• Fill color and opacity
• Stroke width, color and opacity
• Line cap (butt, round, square)
• Line join (bevel, round, miter)
• Miter limit

A single shape layer may contain any number of paths.

SVG Import

Note: The SVG importer is still very much a work-in-progress. The SVG spec is incredibly feature rich, so the imported result may differ significantly from the source SVG.

The SVG imported supports most basic SVG element types.

CSS transforms are supported, but any matrix transforms result in the content of the layer being converted to a shape layer with no transform. This is because CSS matrix transforms cannot be represented with a single layer transform (shears are not supported).

Styles can be applied to elements via inline styles or a style tag, though the support for CSS within style is very, very basic (just direct class names and IDs).

Right now there is no way to import SVGs in the UI. It can only be done via code as of right now.

Array modifiers

Array modifiers allow any layer to be have a transform recursively applied to it.

Here is a basic example of a single circle layer being repeatedly rotated and scaled up slightly.

The array modifier for the example looks like so:

A layer may have any number of array modifiers. Here is an example of a rect layer with two array modifiers.

Its array modifiers look like so:

And as I said, we can have ANY number of array modifiers. We can keep going:

You get the idea.

But array modifiers can be applied to any layer type, even composition layers. Let's take a look at the composition with shapes again:

We can take that composition as a layer into another composition and apply an array modifier to it.

An of course, we can animate array modifiers.

Flow Editor

The Flow Editor allows data to flow from one source to another, and allows that data to be transformed along the way.

The Flow Editor allows you to create a graph for each layer. Values can be written to the properties of the layer via the "Property Output" node, and values can be read from other layers within the composition via the "Property Input" node.

The "Composition" node can also be used to read the current playback frame alongside the width and height of the composition instance that the layer belongs to.

In fact, there are a lot of nodes. Here's all of them.

We can also create a graph for each array modifier. Here's a fun little graph:

It produces a really fun and hypnotizing result.

Layout

The editor's layout system is extremely flexible, allowing you to create any number of areas to work with. You can multiple instances of an area to say, view what you're doing at different levels of zoom.

The area system is heavily based on how Blender does it.