airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.43k stars 2.87k forks source link

Export to SVG animation #1701

Open goddeeris opened 5 years ago

goddeeris commented 5 years ago

https://codepen.io/chrisgannon/pen/GrdoOL

How do you export the animation with Bodymovin to get the code like in de link above? There you can change the stroke width, that is something I would like to do.

Inventsable commented 5 years ago

You wouldn't need to, you can assign a class to any stroke within After Effects then use the stroke-width property. For instance in your AE Comp:

   ‣ ■ 2 ★ Some Shape with a Stroke
         ‣ Contents
               ‣ Group 1
                     ‣ Path 1
                     ‣ Stroke 1 <<< Name this stroke something like ".stroke-test"

Then control the stroke color, width or other properties in CSS:

.stroke-test {
  stroke-width: 3px;
}

You can easily control anything else (like timing, animation, etc.) via CSS with @keyframes, the transition property, and toggling classes when needed.

doublex commented 4 years ago

This tool can render SVGs from lottie files (via plugin): https://www.keyshapeapp.com/