5

Are you using animated SVGs?

7 months ago from , Designer

Heyyy everyone!

I have a question. Do you use animated SVGs at all? What is your overall experience with animated SVGs? Do you think of how to incorporate them in your website/product?

I'm trying to figure out what barriers might be stopping designers and developers from using this amazing file format in production. I'm assuming it's an issue with tools, you either need to be an After Effects whizz or really comfortable with writing code to animate SVGs. I'm wondering if that's the reason?

Keen to hear any discussion around this! What's your story?

7 comments

  • John Doe, 7 months ago

    Lottie is the most familiar I am with, used it in Sketch+AE. But, we just moved to Figma, so still not sure what the workflow is for it.

    Lottie is great, by the folks at AirBnB, works in mobile native apps and web as well, devs love it because of the ease of use and there's a great ecosystem and is actively maintained. Their GitHub repo [1] has several example files, so it's a great way to learn from or learn some tricks. Highly recommended.

    https://github.com/airbnb/lottie-ios/tree/master/_AeFiles

    1 point
  • Nate DaubertNate Daubert, 7 months ago

    Use keyshape for mac. It's not very expensive and allows you to animate with both CSS and their JS library.

    SVGs are just xml as well so developers can often take what you animate in keyshape and manipulate the code even further. SVG is also a great way to mix medias like live text over an image or making part of an image an animated gif while maintaining a small file size. since raster images can also be embeded into an svg.

    1 point
  • Chinmay Kulkarni, 7 months ago

    I've just started getting into SVG animations recently and love it — it's so powerful since users can directly interact with the animation. SVG combined with GSAP is pure gold. Here's the netflix intro animation I recreated with SVGs and GSAP: https://codepen.io/chigguh/pen/VwvLZRY

    I've used lottie before and it's great as well. I did have some issues with file sizes however.

    0 points
  • Michael CookMichael Cook, 7 months ago

    Tool barrier is definitely the issue for me. I've tried Haiku Animator which was so much better than trying to figure out AE but it's not particularly geared towards SVG. Haven't tried Keyshape yet. Would love something web based.

    0 points
    • Tyson KingsburyTyson Kingsbury, 7 months ago

      dude. SVGator. completey online. and it's pretty damn awesome ... been using it for a few years now.

      4 points
      • Jerry TJerry T, 7 months ago

        Heard great things about SVGator some time ago. Then heard about Lottie. I’d have to compare both a bit more.

        0 points
        • Tyson KingsburyTyson Kingsbury, 7 months ago

          lol...fare enough... i've been doing the opposite... been using svgator for ages, but I've 'heard' of lottie.... one of these days I'll give it a go as well :)

          0 points