Skip to content

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

License

Notifications You must be signed in to change notification settings

alexharri/animation-editor

Repository files navigation

Animation Editor

Hero image

Overview

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".

A composition

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.

Composition nesting

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.

Timeline

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.

Graph Editor

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

Graph Editor

Pen Tool

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

Pen tool

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.

An imported SVG

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.

Array modifier circle example

The array modifier for the example looks like so:

Array modifier circle properties

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

Array modifier rect

Its array modifiers look like so:

Array modifier rect properties

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

Rect with three array modifiers

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:

Shape composition

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

Shape composition with array modifier

An of course, we can animate array modifiers.

Animating an array modifier

Flow Editor

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

Basic example

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.

Vector math

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.

All node types

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

Wave Flow Graph

It produces a really fun and hypnotizing result.

Wave 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.

Split view

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

Combining view

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published