Build And Run

Install dependencies and prepare the build directory:

yarn

To watch files for changes, and launch a dev server:

yarn watch

Platform support

Demos are supported on Desktop Chrome and iOS Safari.

It should also run on Chrome on Android and potentially more Android mobile browsers though support has not been tested yet.

Animate your own design

  1. Download the sample skeleton SVG here.
  2. Create a new file in your vector graphics editor of choice. Copy the group named ‘skeleton’ from the above file into your working file. Note:
    • Do not add, remove or rename the joints (circles) in this group. Pose Animator relies on these named paths to read the skeleton’s initial position. Missing joints will cause errors.
    • However you can move the joints around to embed them into your illustration. See step 4.
  3. Create a new group and name it ‘illustration’, next to the ‘skeleton’ group. This is the group where you can put all the paths for your illustration.
    • Flatten all subgroups so that ‘illustration’ only contains path elements.
    • Composite paths are not supported at the moment.
    • The working file structure should look like this:
        [Layer 1]    |---- skeleton    |---- illustration          |---- path 1          |---- path 2          |---- path 3
    
  4. Embed the sample skeleton in ‘skeleton’ group into your illustration by moving the joints around.
  5. Export the file as an SVG file.
  6. Open Pose Animator camera demo. Once everything loads, drop your SVG file into the browser tab. You should be able to see it come to life :D

There are this two things available right now: 

Demo 1: Camera feed

The camera demo animates a 2D avatar in real-time from a webcam video stream.

Demo 2: Static image

The static image demo shows the avatar positioned from a single image.