CODEWITHSUNDEEP
jsongifphotoshopconverterslottie
Mostafa Imani
Mostafa Imani

Reputation: 554

how can I convert a GIF to Lottie json?

As you know we can make a lottie animation by "Adobe After Effect" but I want to know how can I do it by "Photoshop"? Is there any way to convert a GIF to Lottie JSON ?

Upvotes: 15

Views: 96649

Answers (6)

Antony Nicolas Huaman Alikhan
Antony Nicolas Huaman Alikhan

Reputation: 424

Edited: December 03 - 2024

There is a new option to convert not only Gift MP4, MOV, WebM, WebP, GIF, animated PNG and zipped PNG sequence files into Lottie animations 🎉

It is still in beta, inside lottiefiles.com in dashboard you will find a button to upload and you can use it

  1. Go to lottiefiles.com

  2. Sign In

  3. Click on (Upload animations)

3.1 Click on "Convert video in image of sequences of lottie"

3.2 Upload your file -> Example https://prnt.sc/3L3WJ5koJmjc

  1. Download your json file

  2. Enjoy

enter image description here

Upvotes: 2

Dr.jacky
Dr.jacky

Reputation: 3547

  1. Convert your GIF to TGS. I tried this repository but I wasn't succeed.

If you got the error or wasn't succeed on converting GIF to TGS, I'd suggest to start from TGS in first place.

  1. Download the TGS format of the sticker with the help of this telegram bot: https://t.me/Stickerdownloadbot or any other ways you know.
  2. Convert that TGS to Lottie JSON with the help of this https://michielp1807.github.io/lottie-editor/#/.
    [Source: https://github.com/MichielP1807/lottie-editor]

Note: If you upload the generated JSON here: https://edit.lottiefiles.com/ or https://lottiefiles.com/preview, you could see the result and/or edit the file but, sometimes, it's a bit different than what we see via <com.airbnb.lottie.LottieAnimationView in Android. I already issued this.

Update:
1- Go to lottiefiles.com
2- Sign In
3- Upload your file
4- Download your json file

[Source: https://stackoverflow.com/a/77164680/421467]

Upvotes: 0

Mostafa Imani
Mostafa Imani

Reputation: 554

I find a way to solve this problem. to convert a gif to a Json there are lots of website which convert Gif to Json but none of them has a proper output for lottie library.

so this has two steps to do that :

  1. first you must convert Gif file to a video I recommended this website: Gif2Mp4 or any other converter.

  2. in second you must use the link below :

Video to Lottie Json this is the only website which has a good output to render

and by this Link we are able to convert Photoshop Animation to Json lottie file first made an animation by Photoshop then export your Animation in Video format .mp4 and in the end use

Video to Lottie Json

to convert your Video to lottie file

Be aware: by this way you are gonna lose transparent background according to @Dr.jacky Comment

Upvotes: 33

Kresimir Pendic
Kresimir Pendic

Reputation: 3614

This kind of converter does not make sense to use at all..

Gif has rasterized images in it, and your goal is to have vector (svg) images and to nicely animate paths etc so to be much smaller in sizes of course .. so, no converter of this kind will ever do you good in sense of final result!

Upvotes: 2

Mark dG
Mark dG

Reputation: 343

This already exists altough its built in Python you could use some of your own skill to try and convert this into JSON I'll include a link here.

Upvotes: 4

RabuDesign
RabuDesign

Reputation: 41

I was looking for the same. I am looking for an automated method but a quick search led me here. So I figure it doesn't exist yet. I would assume without having done much research yet we should be able to break the GIF into individual images and then use after effects to create a Lottie version. We will also most likely need to create vector versions of the individual images to save on file size.

Upvotes: 4

Related Questions