Show HN: Online editor to create animated SVG

swyx wrote: post #2

to the makers: can you post a tutorial video somewhere? i'm excited about animated SVGs but i have no idea how to use this thing.

I don't have a video tutorial for the svg version jet, but it works simular to this https://youtube.com/watch?v=J4wqm-mvE0U

Quick tutorial: draw something or import a svg, click the green plus button in the lower left to add the drawing to a new keyframe, change something in your drawing, then click the plus button again to add the changes to the second keyframe, then press play to watch the animation. (if you import a svg you'll probably need to ungroup the different elements)

Re: Show HN: Online editor to create animated SVG

#5

Post by cors-fls » Mon, Oct 25, 2021, 6:35 AM UTC

Interesting, I wish it had interpolated the move of the rectangle handles too ! It's the second thing I tried.

Re: Show HN: Online editor to create animated SVG

#6

Post by cycomanic » Mon, Oct 25, 2021, 6:40 AM UTC

I've been looking for an editor to animate SVGs for a long time. Definitely will try it out.

Re: Show HN: Online editor to create animated SVG

#7

Post by TheRealNGenius » Mon, Oct 25, 2021, 6:48 AM UTC

Neat project. I placed down a rectangle, clicked the + button, then moved one of the corners (using the white mouse button), and clicked the + button again. But it didn't seem to interpolate the movement of the corner on the rectangle. Is the expected behavior possible?

Re: Show HN: Online editor to create animated SVG

#8

Post by 8toast » Mon, Oct 25, 2021, 7:31 AM UTC

TheRealNGenius wrote: post #7

Neat project. I placed down a rectangle, clicked the + button, then moved one of the corners (using the white mouse button), and clicked the + button again. But it didn't seem to interpolate the movement of the corner on the rectangle. Is the expected behavior possible?

It's possible, at the moment it only works if you modify the corner with the curved angle/handel tool in all fraims, I'll need to fix that

Re: Show HN: Online editor to create animated SVG

#9

Post by karakanb » Mon, Oct 25, 2021, 7:58 AM UTC

seems nice and simple, but doesn't seem to be working on Firefox, nothing happens when I hit the "play" button. also, a quick feedback for the makers: it would have made onboarding easier for me if it came pre-filled with a simple animation instead of an empty canvas.

Re: Show HN: Online editor to create animated SVG

#10

Post by truly » Mon, Oct 25, 2021, 8:17 AM UTC

Very nice! I currently use Inkscape (slow) and Krita (a bit difficult to get started with) to edit SVGs. Your tool seems very promising, but it is currently missing a few bits that would be important for me (color fill, gradients, text, layers would be nice).

I am missing the mechanics of making animations. I clicked + a few times and accidentally made a shape move, but I could not replicate it. Any way to delete frames?

Is this a side project? What are your plans for future development?