We have a project in After Effects with a file upload animation, and I would like to know how to most correctly transfer this to React Native?
We tried exporting to mp4
or gif
, but we need a transparent background and more control.
We have a project in After Effects with a file upload animation, and I would like to know how to most correctly transfer this to React Native?
We tried exporting to mp4
or gif
, but we need a transparent background and more control.
2
Answers
When making a transparent gif from an After Effects project I usually render out a Quicktime ProRes 4444 .mov file. (see image) Then I import the mov into Photoshop and use File > Export > Save for Web. Be sure to enable transparency, and set it to Loop Forever, assuming that’s what you want. It makes for much better quality gifs than from Ae, which I think the newest versions don’t even support natively anymore.
Alternatively you might be able to convert the mov file into a webm (using ffmpeg or other 3rd party software) to retain the colors, since the gif file format only supports 256 colors, and also doesn’t support semi-transparent pixels (such as outer glows). I’m unsure if React Native supports webm files though, I’m just an After Effects guy.
Ae export settings
Ps gif export settings
Try Lottie Animations, its simple and you can import AE projects.