# GSOC-2019::Export Animation for Web

**URL:** https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507
**Category:** Development
**Tags:** lottie, export
**Created:** [March 2, 2019, 12:30pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507 "2019-03-02T12:30:40Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![AnishG](https://forums.synfig.org/user_avatar/forums.synfig.org/anishg/32/4428_2.png) [@AnishG](https://forums.synfig.org/u/AnishG)
#### Post date: [March 2, 2019, 12:30pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/1 "2019-03-02T12:30:40Z")

</div>

Hello. I am Anish. I want to contribute to Synfig in GSOC 2019. I would like to work on export for web through lottie export format. Please suggest me where do I start this.

---

<div class="post-metadata">

### Author: ![KonstantinDmitriev](https://forums.synfig.org/user_avatar/forums.synfig.org/konstantindmitriev/32/3_2.png) [@KonstantinDmitriev](https://forums.synfig.org/u/KonstantinDmitriev)
#### Post date: [March 3, 2019, 4:17pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/2 "2019-03-03T16:17:18Z")

</div>

Hi @AnishG! My name is Konstantin Dmitriev, I am maintainer of Synfig.

Please let me know some additional information about you - what are you studying (and where), what programming languages you use, and what projects you have implemented/participated (if any).

For getting started recommendations please check my comment here - [https://github.com/synfig/synfig/issues/704#issuecomment-469037539](https://github.com/synfig/synfig/issues/704#issuecomment-469037539)🙂

---

<div class="post-metadata">

### Author: ![AnishG](https://forums.synfig.org/user_avatar/forums.synfig.org/anishg/32/4428_2.png) [@AnishG](https://forums.synfig.org/u/AnishG)
#### Post date: [March 3, 2019, 5:01pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/3 "2019-03-03T17:01:25Z")

</div>

Hey @KonstantinDmitriev,  
I am a 3rd year undergraduate student pursuing my B.Tech in Computer Science and M.S. by research in IIIT Hyderabad, India. My research domain is around compilers in Computer System Groups(CSG) lab, IIIT Hyderabad.

What programming laguages you use?  
I have fairly good understanding of Python/C,C++/Java,openmp,cuda languages.

What projects you have implemented/participated?

- Implemented a 2D game using openGL and c++ [openGL\_PacmanKiller](https://github.com/AnishGG/openGL_PacmanKiller).
- Implemented a 2D game in python.
- Implemented a web app similar to [bookmyshow.com](http://bookmyshow.com) (The forum is not allowing to post more than two links ☹ )
- Written code generator and AST passes for Decaff-compiler. (Can be found on my github profile)

Please let me know where should I ask the doubts(if any), on this forum or on the issue?

---

<div class="post-metadata">

### Author: ![AnishG](https://forums.synfig.org/user_avatar/forums.synfig.org/anishg/32/4428_2.png) [@AnishG](https://forums.synfig.org/u/AnishG)
#### Post date: [March 3, 2019, 5:04pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/4 "2019-03-03T17:04:04Z")

</div>

LINKS for the previous post

- 2D game in python [Bomberman](https://github.com/AnishGG/Bomberman)
- Decaff-compiler [Decaff compiler](https://github.com/AnishGG/decaff-compiler)

---

<div class="post-metadata">

### Author: ![KonstantinDmitriev](https://forums.synfig.org/user_avatar/forums.synfig.org/konstantindmitriev/32/3_2.png) [@KonstantinDmitriev](https://forums.synfig.org/u/KonstantinDmitriev)
#### Post date: [March 3, 2019, 5:46pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/5 "2019-03-03T17:46:45Z")

</div>

@AnishG Thank you for the links! Your portfolio looks impressive! I am happy to see you got experience in C++ and also OpenGL. 🙂

> Please let me know where should I ask the doubts(if any), on this forum or on the issue?

All doubts/progress related with Export for Web project should go to [https://github.com/synfig/synfig/issues/704](https://github.com/synfig/synfig/issues/704)

On forums we can discuss general development-related problems, ideas, proposals.

---

<div class="post-metadata">

### Author: ![AnishG](https://forums.synfig.org/user_avatar/forums.synfig.org/anishg/32/4428_2.png) [@AnishG](https://forums.synfig.org/u/AnishG)
#### Post date: [March 3, 2019, 9:13pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/6 "2019-03-03T21:13:36Z")

</div>

@KonstantinDmitriev Could you suggest me some layer to work on? Should I select any layer from ‘synfig/synfig-core/src/synfig/layers’ ? Also where can I read about the .sif (Synfig format) ? I tried creating a simple polygon layer and saved it in .sifz format, but it seems to be a binary file.

---

<div class="post-metadata">

### Author: ![Reshabh](https://forums.synfig.org/user_avatar/forums.synfig.org/reshabh/32/4426_2.png) [@Reshabh](https://forums.synfig.org/u/Reshabh)
#### Post date: [March 3, 2019, 9:26pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/7 "2019-03-03T21:26:53Z")

</div>

Hello @AnishG I can help you with sifz. When you save it, manually change it to .sif by default it is .sifz

---

<div class="post-metadata">

### Author: ![AnishG](https://forums.synfig.org/user_avatar/forums.synfig.org/anishg/32/4428_2.png) [@AnishG](https://forums.synfig.org/u/AnishG)
#### Post date: [March 3, 2019, 9:33pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/8 "2019-03-03T21:33:34Z")

</div>

@Reshabh,  
Thank you for helping me out. But how does changing the file format manually help?( I tried but didn’t help :()  
How do access the .sif file similar to .xml format?

---

<div class="post-metadata">

### Author: ![AnishG](https://forums.synfig.org/user_avatar/forums.synfig.org/anishg/32/4428_2.png) [@AnishG](https://forums.synfig.org/u/AnishG)
#### Post date: [March 3, 2019, 9:37pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/9 "2019-03-03T21:37:43Z")

</div>

Okay, It worked. While saving I changed it to .sif format.  
For others, this also might be helpful [https://wiki.synfig.org/Sif\_Format](https://wiki.synfig.org/Sif_Format)

---

<div class="post-metadata">

### Author: ![KonstantinDmitriev](https://forums.synfig.org/user_avatar/forums.synfig.org/konstantindmitriev/32/3_2.png) [@KonstantinDmitriev](https://forums.synfig.org/u/KonstantinDmitriev)
#### Post date: [March 4, 2019, 8:24am UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/10 "2019-03-04T08:24:56Z")

</div>

> Could you suggest me some layer to work on? Should I select any layer from ‘synfig/synfig-core/src/synfig/layers’ ?

I suggest to take an Image Layer or Star Layer ([Star Layer - Synfig Animation Studio](https://wiki.synfig.org/Star_Layer)). Polygon Layer is good too, it is just more complicated (which doesn’t mean bad).

> Also where can I read about the .sif (Synfig format) ?

Unfortunately, SIF format is not documented anywhere. It is just a XML document and it is quite easy to read.

---

<div class="post-metadata">

### Author: ![AnishG](https://forums.synfig.org/user_avatar/forums.synfig.org/anishg/32/4428_2.png) [@AnishG](https://forums.synfig.org/u/AnishG)
#### Post date: [March 4, 2019, 1:13pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/11 "2019-03-04T13:13:46Z")

</div>

@KonstantinDmitriev  
So I was trying to get familiar with both the .sif and lottie format. I am facing one problem as how will we map the parameters across these formats.  
For example, there is a parameter “z\_depth” in a layer, but I could not find any such parameter in the lottie format.  
Where as some parameters such as “transformation” are available in both and can be transformed into lottie format.  
Any help would be appreciated. TIA

---

<div class="post-metadata">

### Author: ![BobSynfig](https://forums.synfig.org/user_avatar/forums.synfig.org/bobsynfig/32/175_2.png) [@BobSynfig](https://forums.synfig.org/u/BobSynfig)
#### Post date: [March 4, 2019, 1:51pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/12 "2019-03-04T13:51:58Z")

</div>

This is the big challenge with Synfig/Lottie conversion…  
It is a very different concept, you can’t map directly from one format to another, as well as SVG import is failing for a lot of years…  
Unless we develop a Lottie dedicated version of Synfig with specific layers and the full set of parameters

---

<div class="post-metadata">

### Author: ![AnishG](https://forums.synfig.org/user_avatar/forums.synfig.org/anishg/32/4428_2.png) [@AnishG](https://forums.synfig.org/u/AnishG)
#### Post date: [March 4, 2019, 2:21pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/13 "2019-03-04T14:21:18Z")

</div>

@BobSynfig, Thanks for answering!  
For now, I will make a list of parameters which do not match and try to match as many as possible. But what about the remaining ones, any idea? Should I just ignore them(don’t think that’s a good idea in a long run)? Or I can ignore them for now and raise an issue for addition/alternative of those parameters?  
TIA

---

<div class="post-metadata">

### Author: ![BobSynfig](https://forums.synfig.org/user_avatar/forums.synfig.org/bobsynfig/32/175_2.png) [@BobSynfig](https://forums.synfig.org/u/BobSynfig)
#### Post date: [March 4, 2019, 4:55pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/14 "2019-03-04T16:55:03Z")

</div>

For me, export to Lottie is simply… a bad idea!  
Lottie has specific targets, looped animations mostly for apps and web.  
Also it is a _format to display animations generated through a plugin from Adobe AfterEffect_ [https://airbnb.io/lottie/after-effects/getting-started.html](https://airbnb.io/lottie/after-effects/getting-started.html)  
It is like to expect transmutation from lead to gold.  
As I mentionned it before, SVG which is a long-date standard is still not properly supported in Synfig.  
I don’t think adding a “sketchy” support for a format generated from a _paid closed-source software (AAE)_ would bring any interest to Synfig but instead a feeling of “I was expecting it to work but it doesn’t”  
Unless we modify Synfig to work specificaly for Lottie, while it is not even partly done for SVG.

_Disclaimer: This is only my personal opinion, I am not implied in decision taking for the directions to take in Synfig’s development_

---

<div class="post-metadata">

### Author: ![AnishG](https://forums.synfig.org/user_avatar/forums.synfig.org/anishg/32/4428_2.png) [@AnishG](https://forums.synfig.org/u/AnishG)
#### Post date: [March 4, 2019, 5:41pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/15 "2019-03-04T17:41:21Z")

</div>

Now I am getting really sketchy about this project. Should I even pursue this any more?  
@KonstantinDmitriev, you are the mentor for this project. Could you give me your side of view regarding this.  
Thanks

---

<div class="post-metadata">

### Author: ![ebarranko](https://forums.synfig.org/user_avatar/forums.synfig.org/ebarranko/32/4953_2.png) [@ebarranko](https://forums.synfig.org/u/ebarranko)
#### Post date: [March 4, 2019, 6:32pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/16 "2019-03-04T18:32:25Z")

</div>

Since I’m became Synfig user the topic I’ve read the most is about import/export SVG files and SVG animated support, the only open source editor that I know can work with this is [aniGen editor](https://github.com/aibosan/anigen), but is not the most intuitive editor to use and I’m a Synfig user. I don’t even know what Lottie was until I read it here.

---

<div class="post-metadata">

### Author: ![KonstantinDmitriev](https://forums.synfig.org/user_avatar/forums.synfig.org/konstantindmitriev/32/3_2.png) [@KonstantinDmitriev](https://forums.synfig.org/u/KonstantinDmitriev)
#### Post date: [March 5, 2019, 4:55am UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/17 "2019-03-05T04:55:29Z")

</div>

> [@AnishG](#):
>
> But what about the remaining ones, any idea? Should I just ignore them

Yes, you can ignore parameters that are not supported in Lottie.

I am do not share opinion of @BobSynfig regarding perspectives of Lottie format.

My key point: **we are not aiming on adding 1:1 conversion**.

So, we do not expect to convert _everything_ what Synfig can do, we do not expect output to look 100% the same. In the same way, Lottie _doesn’t_ supports all features of AE - [http://airbnb.io/lottie/supported-features.html](http://airbnb.io/lottie/supported-features.html)

What we should aim to achieve is a proper conversion of vector graphics (outlines, regions, geometric primitives) and images. Those are enough to create simple but impressive vector-only animations using Synfig, like these:

[![](https://raw.githubusercontent.com/airbnb/lottie-web/master/gifs/Example1.gif) ](https://raw.githubusercontent.com/airbnb/lottie-web/master/gifs/Example1.gif)

[![](https://raw.githubusercontent.com/airbnb/lottie-web/master/gifs/Example2.gif) ](https://raw.githubusercontent.com/airbnb/lottie-web/master/gifs/Example2.gif)

So, if user will use vector-only tools of Synfig, then he **will be able** to produce animations in Lottie format.

Here is another example of animation created with vector only tools (with an exception of blurred background at the end, which also could be replaced by vectors):

[![](https://img.youtube.com/vi/3dVamedBYq8/maxresdefault.jpg "Deadline (English version)") ](https://www.youtube.com/watch?v=3dVamedBYq8)

I think it is ok to have exporter, which doesn’t supports all features of Synfig (which, in fact, is a frequent case for any app when converting from one format to another). Also, the exporter can analyze of contents of suif file before exporting and give a warning with a list of layers that cannot be converted (if any).

With this I believe this make Synfig a tool for creating web animations (vector, motion-graphics, cutout, etc.).

---

<div class="post-metadata">

### Author: ![AnishG](https://forums.synfig.org/user_avatar/forums.synfig.org/anishg/32/4428_2.png) [@AnishG](https://forums.synfig.org/u/AnishG)
#### Post date: [March 5, 2019, 12:30pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/18 "2019-03-05T12:30:03Z")

</div>

@KonstantinDmitriev, Thank you for your side of view. So I decided to continue with this project only 🙂 .  
I have made some progress regarding the mapping from .sif to lottie.  
I have picked up all the parameters from [Star\_Layer](https://wiki.synfig.org/Star_Layer) and mapped them to [lottie format](https://github.com/airbnb/lottie-web/tree/master/docs/json).  
To whom and where do I share my progress, so that I can start working on the python plugin as soon as possible.

---

<div class="post-metadata">

### Author: ![KonstantinDmitriev](https://forums.synfig.org/user_avatar/forums.synfig.org/konstantindmitriev/32/3_2.png) [@KonstantinDmitriev](https://forums.synfig.org/u/KonstantinDmitriev)
#### Post date: [March 5, 2019, 4:35pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/19 "2019-03-05T16:35:08Z")

</div>

I think it is fine to share it here. I will be happy to provide my feedback. 🙂

---

<div class="post-metadata">

### Author: ![AnishG](https://forums.synfig.org/user_avatar/forums.synfig.org/anishg/32/4428_2.png) [@AnishG](https://forums.synfig.org/u/AnishG)
#### Post date: [March 5, 2019, 4:39pm UTC](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507/20 "2019-03-05T16:39:17Z")

</div>

Okay,  
Here is file as of now ~~[Mapping](https://docs.google.com/document/d/1N9dTbE_S3jxCCfZJV3dHB5Ouu5GnZ4P8Fms1_4VGDp4/edit)~~ [link](https://synfig-docs-dev.readthedocs.io/en/latest/projects/lottie/layers/star_layer.html).  
Also would it be okay, if I share my pre-proposal with you and could you comment/suggest on it?

[Next page](https://forums.synfig.org/t/gsoc-2019-export-animation-for-web/9507.md?page=2)
