# How to create animated gif of rotating gltf model?

**URL:** <https://discourse.threejs.org/t/how-to-create-animated-gif-of-rotating-gltf-model/39705>\
**Category:** Questions\
**Tags:** gif, animation\
**Created:** [June 27, 2022, 1:27pm UTC](https://discourse.threejs.org/t/how-to-create-animated-gif-of-rotating-gltf-model/39705 "2022-06-27T13:27:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![marios098](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@marios098](https://discourse.threejs.org/u/marios098)\
**Post date:** [June 27, 2022, 1:27pm UTC](https://discourse.threejs.org/t/how-to-create-animated-gif-of-rotating-gltf-model/39705/1 "2022-06-27T13:27:44Z")

</div>

I want to create a gif animation of rotating gltf model. How to achieve this? What should I take into consideration?

Ideally using node.js backend but frontend solutions are also welcome.

---

<div class="post-metadata">

**Author:** ![marios098](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@marios098](https://discourse.threejs.org/u/marios098)\
**Post date:** [June 27, 2022, 3:37pm UTC](https://discourse.threejs.org/t/how-to-create-animated-gif-of-rotating-gltf-model/39705/3 "2022-06-27T15:37:52Z")

</div>

How is it related?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 28, 2022, 8:02am UTC](https://discourse.threejs.org/t/how-to-create-animated-gif-of-rotating-gltf-model/39705/4 "2022-06-28T08:02:57Z")

</div>

Sorry, I’ve mixed your topic with another one. I’ve deleted the misleading post.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 28, 2022, 8:08am UTC](https://discourse.threejs.org/t/how-to-create-animated-gif-of-rotating-gltf-model/39705/5 "2022-06-28T08:08:41Z")

</div>

Regarding your question: It seems you can use a library like `jsgif` for this.

> **[GitHub - antimatter15/jsgif: Save a HTML5 Canvas to GIF and Animations. A...](https://github.com/antimatter15/jsgif)**
>
> Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS - GitHub - antimatter15/jsgif: Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS

However, I’m not sure `jsgif` works if you pass in a 3D rendering context to its GIF encoder. You probably need a second canvas with a 2D rendering context and copy the frames from your WebGL canvas to it.