Is it possible to export After Effects animations to SVG + CSS? I'm okay with a commercial solution for this.

I know about Bodymovin' and Lottie, but I would like to avoid going down this path, because I believe that native animations with CSS perform much better than what Lottie is able to deliver, since it relies on JavaScript.

  • 1
    Depends on what features of after effects you are willing to sacrafice. But generally there is no good one. – joojaa Mar 9 '20 at 10:33
  • Thanks joojaa. I'll gladly accept your comment as an answer, if you write it as one. – Jan Aagaard Mar 10 '20 at 11:56

Expanding a bit on @joojaa's comment, posting what I know now:

After Effects (AE) can do a lot more than what is possible with SVG+CSS, so it's not technically possible to just export an AE animation to SVG+CSS. If SVG+CSS is the desired end product, use another animation software tool than AE. (I'm not a designer, so don't know what to recommend.)

Exporting to a Bodymovin' JSON and running the animation with Lottie for Web makes it possible to do a lot more, but there are still some limitation, see https://github.com/airbnb/lottie-web#ae-feature-support. The result will be best if the designer knows about what works and what does not. I had issues with letter spacing being completely off and elements not being hidden when trying to use one of the optimized versions of lottie.js.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.