Show HN: Online editor to create animated SVG

Show HN: Online editor to create animated SVG(bestsnip.com)

66 points by 8toast 4 years ago | 14 comments

swyx 4 years ago |

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.

8toast 4 years ago | |

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)

beardyw 4 years ago |

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!

truly 4 years ago |

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?

TechBro8615 4 years ago | |

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

TheRealNGenius 4 years ago |

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?

8toast 4 years ago | |

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

solarkraft 4 years ago |

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.

easrng 4 years ago | |

Maybe https://shapeshifter.design/ ?

gareiner 4 years ago |

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.

cors-fls 4 years ago |

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

karakanb 4 years ago |

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.

cycomanic 4 years ago |

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

zhamisen 4 years ago |

Can I import svgs from my local files?