# GSoC 2020 - Work Summary\[Improvements in Lottie Exporter plugin\]

**URL:** https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328
**Category:** Development
**Tags:** lottie, export
**Created:** [August 27, 2020, 3:04pm UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328 "2020-08-27T15:04:50Z")
**Posts on this page:** 19
**Page:** 1

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 27, 2020, 3:04pm UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/1 "2020-08-27T15:04:51Z")

</div>

As part of the GSoC work submission guidelines, I will be posting here about the work done by me on improving the features of Lottie Exporter plugin. I will be incrementally posting all the features that have been added or improvements that have been made till 31st August.

Watch this space 😃

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 27, 2020, 3:34pm UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/2 "2020-08-27T15:34:23Z")

</div>

Starting with the first contribution towards synfig, `Linear Gradient` layer and `Radial Gradient` support has been provided. Lottie does not provide support for gradient ramp, which leads to only Gradient fill as the only option.  
I have attached two videos where I show export for the two layers.  
`Linear Gradient Layer` : [https://youtu.be/r368kJu3Czo](https://youtu.be/r368kJu3Czo)  
`Radial Gradient Layer` : [https://youtu.be/Wqqtg22Dy-g](https://youtu.be/Wqqtg22Dy-g)

The code for the PR is available in [https://github.com/synfig/synfig/pull/1446](https://github.com/synfig/synfig/pull/1446) .

Further improvements right now are not possible, due to the inavailability of support for gradient ramp in Lottie. Gradient ramp would make it easier to create shapes and fill them with gradient. It could also lead to the possibility of exporting curve,conical and spiral gradient layers.

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 27, 2020, 3:53pm UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/3 "2020-08-27T15:53:40Z")

</div>

Moving forward, there are a couple of convert methods that were exported from Synfig format to Lottie Format.  
Starting with `Vector Angle` convert method, you can watch the video of an export here : [https://youtu.be/JuOY3fLO-wA](https://youtu.be/JuOY3fLO-wA)

The code for this PR is available at [https://github.com/synfig/synfig/pull/1409/](https://github.com/synfig/synfig/pull/1409/)

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 27, 2020, 3:57pm UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/4 "2020-08-27T15:57:43Z")

</div>

**`aTan2` convert method**  
Video of an export from Synfig format to Lottie : [https://youtu.be/\_4eXgANPcp4](https://youtu.be/_4eXgANPcp4)  
The code for this PR is available at : [https://github.com/synfig/synfig/pull/1363](https://github.com/synfig/synfig/pull/1363)

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 28, 2020, 11:00am UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/5 "2020-08-28T11:00:03Z")

</div>

**Power convert method**  
Video of an export from Synfig format to Lottie : [https://youtu.be/YURkufXY\_mA](https://youtu.be/YURkufXY_mA)  
The code for this PR is available at : [https://github.com/synfig/synfig/pull/1515](https://github.com/synfig/synfig/pull/1515)

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 28, 2020, 11:43am UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/6 "2020-08-28T11:43:06Z")

</div>

**Blur Layer**  
In Blur layer, Lottie only provides support for Gaussian blur, so that method was taken as default for all types of blur in the blur layer.  
Video of an export from Synfig format to Lottie : [https://youtu.be/IF2p9d2HXHQ](https://youtu.be/IF2p9d2HXHQ)  
The code for this PR is available at : [https://github.com/synfig/synfig/pull/1505](https://github.com/synfig/synfig/pull/1505)

_ **Scope for Improvement** _ : If Lottie provides support for other types of blur such as Motion blur and Radial blur, then we can provide support for export of those layer as well. Right now Lottie does not have that.

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 29, 2020, 9:50am UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/7 "2020-08-29T09:50:09Z")

</div>

**Vector X and Vector Y Convert method**  
Video of an export from Synfig format to Lottie : [https://youtu.be/GY6GLgK9xFg](https://youtu.be/GY6GLgK9xFg)  
The code for this PR is available at : [https://github.com/synfig/synfig/pull/1516](https://github.com/synfig/synfig/pull/1516)

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 29, 2020, 10:13am UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/8 "2020-08-29T10:13:22Z")

</div>

**Exporting Outlines without variable widths**  
Converting Synfig format outlines to Lottie format outlines led to the creation of big file sizes. This was because every vertex width was accounted for and this led to the algorithm having to process the animation frame by frame creating a huge `json` file. Lottie provides the option of exporting outlines without variable widths and therefore outline width was chosen as the width for all vertices. This lead to a huge reduction in file sizes.  
An example for the `.sif` file : [lottie-outlines.sif](https://forums.synfig.org/uploads/short-url/j9KZBsMPEAnPpjsQmxz6ETKGbJC.sif) (26.7 KB)  
Exporting this file frame by frame results in a `json` file of 504890 lines(13.4MB). The rendered `json` file is available here [GDrive link](https://drive.google.com/file/d/1SsChI5fzmrqxMNlx5NHPIgSQpF7f1CZS/view?usp=sharing).

Now, exporting the same file without variable widths results in a `json` file of 944 lines(23.6KB). The rendered `json` is available here : [https://gist.github.com/saurabh-ramola/5deb8babb9854e25b35b2ea3821b3946](https://gist.github.com/saurabh-ramola/5deb8babb9854e25b35b2ea3821b3946)

There is a 99.8% reduction in size of the files leading to faster rendering of the outlines.

Video of an export : [https://youtu.be/spUsUL6ZUXI](https://youtu.be/spUsUL6ZUXI)  
Code for this PR is available at : [https://github.com/synfig/synfig/pull/1647](https://github.com/synfig/synfig/pull/1647)

The user now has the option to export outlines with and without variable widths.

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 29, 2020, 10:33am UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/9 "2020-08-29T10:33:20Z")

</div>

**Logarithm Conver Methodt**  
Video of an export from Synfig format to Lottie : [https://youtu.be/ig-WrW-iPrw](https://youtu.be/ig-WrW-iPrw)  
The code for this PR is available at : [https://github.com/synfig/synfig/pull/1586](https://github.com/synfig/synfig/pull/1586)

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 29, 2020, 10:45am UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/10 "2020-08-29T10:45:19Z")

</div>

**Dot Product convert method**  
Video of an export from Synfig format to Lottie : [https://youtu.be/T6lCYlrAY7A](https://youtu.be/T6lCYlrAY7A)  
The code for this PR is availabel at : [https://github.com/synfig/synfig/pull/1593](https://github.com/synfig/synfig/pull/1593)

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 30, 2020, 10:59am UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/11 "2020-08-30T10:59:35Z")

</div>

**Reciprocal convert method**  
Video of an export from Synfig format to Lottie : [https://youtu.be/crc-1MM0xs4](https://youtu.be/crc-1MM0xs4)  
The code for this PR is available at : [https://github.com/synfig/synfig/pull/1619](https://github.com/synfig/synfig/pull/1619)

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 30, 2020, 11:13am UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/12 "2020-08-30T11:13:40Z")

</div>

**Range convert method**  
Video of an export from Synfig format to Lottie : [https://youtu.be/RiBV9LUxC7M](https://youtu.be/RiBV9LUxC7M)  
The code for this PR is available at : [https://github.com/synfig/synfig/pull/1606](https://github.com/synfig/synfig/pull/1606)

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 30, 2020, 11:30am UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/13 "2020-08-30T11:30:13Z")

</div>

**Vector Length convert method**  
Video of an export from Synfig format to Lottie : [https://youtu.be/pvBV0jTbzmY](https://youtu.be/pvBV0jTbzmY)  
The code for this PR is available at : [https://github.com/synfig/synfig/pull/1650](https://github.com/synfig/synfig/pull/1650)

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 30, 2020, 11:39am UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/14 "2020-08-30T11:39:13Z")

</div>

**Not Convert method**  
Video of an export from Synfig format to Lottie : [https://youtu.be/EkA7anYxwLU](https://youtu.be/EkA7anYxwLU)  
The code for this PR is available at : [https://github.com/synfig/synfig/pull/1587](https://github.com/synfig/synfig/pull/1587)

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 30, 2020, 3:07pm UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/15 "2020-08-30T15:07:56Z")

</div>

**Shade Layer**  
Shade layer exporting was made possible with the use of drop shadow effect from Adobe After-effects. Caveat : Only Gaussian blurring is supported by Lottie for drop shadow.  
Video of an export from Synfig format to Lottie : [https://youtu.be/y7pG0HJVXGk](https://youtu.be/y7pG0HJVXGk)  
The code for this PR is available at : [https://github.com/synfig/synfig/pull/1629](https://github.com/synfig/synfig/pull/1629)

Scope for improvement : At the moment, there seems to be none.

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 30, 2020, 3:41pm UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/16 "2020-08-30T15:41:55Z")

</div>

**Text Layer**  
Text layer exporting was done from Synfig format to Lottie format using the `documentData` option of Lottie.  
Video of an export from Synfig format to Lottie : [https://youtu.be/8A\_s6HNpksQ](https://youtu.be/8A_s6HNpksQ)  
The code for this PR is available at : [https://github.com/synfig/synfig/pull/1469](https://github.com/synfig/synfig/pull/1469)

Scope for improvement : Group layer in the Exporter might have to be rewritten based on text layer in a group because text layer in a group does not require anchor offset while other layers do.

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 30, 2020, 4:28pm UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/17 "2020-08-30T16:28:14Z")

</div>

**Bone Convert Method**  
Coming to the toughest part of the project personally for me, `bone_convert` method took the maximum time and effort from my side. The main problems associated with this were that Lottie does not support affine transformations, so the mapping of equations for each parameter had to be done manually by me.  
Bone convert of a vertices is complete and ready for export as is evident through this video : [https://youtu.be/jKPbjOGxX-o](https://youtu.be/jKPbjOGxX-o) . The `sif` file for this is [final.sif](https://forums.synfig.org/uploads/short-url/45nc9Bg5TEvsxxXPxbPBCS9neRr.sif) (18.8 KB) .

However, bone\_convert method for the `transformation` parameter of a group layer is still not complete yet and I will have to colloborate with @AnishG on this as we have not been able to come up with a solution to the problem of incorrect anchoring. I have shown this in the video : [https://youtu.be/zJiJG\_GIQN4](https://youtu.be/zJiJG_GIQN4) . The `sif` file for this is [lottie-bones-01.sif](https://forums.synfig.org/uploads/short-url/fTl4XoVKgqV8s5ZiBsXnOnJC1Uy.sif) (194.8 KB) .

I will be working on fixing the `bone_convert` for transformation parameter of a group layer after my coding period ends and complete it alongwith other stretch goals if they arise.

Something I have noticed about `Bone` is that it is not documented very well, especially the underlying equations that are required to export it, that was a major problem for me.

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 30, 2020, 4:29pm UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/18 "2020-08-30T16:29:53Z")

</div>

In addition to the coding problems, I also added documentation alongside every PR.  
The list of those PRs are available at : [Documentation PRs](https://github.com/synfig/synfig-docs-dev/pulls?q=is%3Apr+author%3Asaurabh-ramola)

---

<div class="post-metadata">

### Author: ![saurabh22](https://forums.synfig.org/user_avatar/forums.synfig.org/saurabh22/32/4763_2.png) [@saurabh22](https://forums.synfig.org/u/saurabh22)
#### Post date: [August 30, 2020, 4:40pm UTC](https://forums.synfig.org/t/gsoc-2020-work-summary-improvements-in-lottie-exporter-plugin/11328/19 "2020-08-30T16:40:02Z")

</div>

**Overall** , I really enjoyed my experience of working on Synfig and Lottie Exporter plugin. There were times when I got stuck in problems but my mentor @AnishG was extremely helpful and prompt in helping me with my problems and I’d also like to point out @KonstantinDmitriev for regularly helping me with the testing of the PRs. Because of the regular testing by my mentors I was able to rectify the mistakes in the PRs in time.  
Because I liked this project, I also plan to come back and work on resolving more problems once GSoC ends and colloborate with @AnishG on Lottie Exporter plugin.

**What’s left**  
_Bone\_convert of transformation parameter in a group(anchoring issues)_

**Logs**  
You can find the weekly progress of the project here : [[GSoC 2020] Improvements for Lottie Exporter Plugin](https://forums.synfig.org/t/gsoc-2020-improvements-for-lottie-exporter-plugin/10962)

Last but not the least I’d also like to thank @ice0 for providing regular help related to PRs and @rodolforg for helping out in figuring the correct `bone` equations.
