https://github.com/chr15m/svg-flipbook

SVG flipbook animation with layers
https://github.com/chr15m/svg-flipbook

animation clojurescript css inkscape svg webapp

Last synced: 7 days ago
JSON representation

SVG flipbook animation with layers

• Host: GitHub
• URL: https://github.com/chr15m/svg-flipbook
• Owner: chr15m
• License: other
• Created: 2018-11-10T08:59:16.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-14T09:02:02.000Z (over 1 year ago)
• Last Synced: 2025-03-27T17:47:01.095Z (24 days ago)
• Topics: animation, clojurescript, css, inkscape, svg, webapp
• Language: Clojure
• Homepage: https://svgflipbook.com
• Size: 1.58 MB
• Stars: 44
• Watchers: 4
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: COPYING

Awesome Lists containing this project

README

        
Tool to do flipbook-style SVG animation with layers in Inkscape and other SVG editors.

## [Try it out online](https://svgflipbook.com/)

![SVG Animation Assistant interface showing Inkscape and a walk cycle animation](./screens/walk-cycle.gif)

This tool will cycle through the layers of your SVG allowing you to do basic flip-book style animation. Each layer in your SVG is one frame of the animation.

The animation live-reloads in the assistant window whenever you hit save in Inkscape.

![SVG Animation Assistant interface showing live reloading](./screens/svg-animation-assistant.gif)

Customise the frame time and behaviour by editing the layer name:

![Inkscape layers UI with customisation](./screens/layers.png)

 * Set the number of milliseconds to pause on each frame by entering a number in brackets in the layer name like (100) for a pause of 1/10th of a second.

 * Add static background frames by putting (static) in the layer name.