Show HN: Online editor to create animated SVG | Hacker News Reader

Show HN: Online editor to create animated SVG

bestsnip.com

66 points8toast14 comments

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)

It makes me think back to Macromedia Flash 2 - a simple vector animation system. Remember the demo of the baby on the beach with a ball. Let's get that made again, but then stop at that!

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?

I found Keyshape pretty good for this: https://www.keyshapeapp.com/

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

Thanks! It's funny that whenever I search for this online I just get garbage results. Bookmarked.

There was another one that would even let you change the interpolated path between keyframes. Does anyone know that one? I'm aware that's a pretty vague desciption.

Maybe https://shapeshifter.design/ ?

I give props to the UX team. The editor seems lightweight and easy to use. I'm planning to test out things here and hope that it will give me a good time.

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

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.

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

Can I import svgs from my local files?

Reply on news.ycombinator.com