I’ve created an animation and rendered a .mov file and I used media encoder to export a .png image sequence to maintain transparency for the Lottie animation. After rendering all 350 frames from adobe media encoder I threw the files into After Effects to export a .JSON file through the bodymovin plugin.
I followed the tutorial step by step and applied compression and included the JSON images under the assets tab before exporting through bodymovin however, every time I try to upload my latest animation render to webflow the site crashes and reloads or the file just won’t upload at all. I’m not sure why I’m experiencing this. I’ve uploaded other JSON files before but now it just won’t work.
Any idea why?
Here is my site Read-Only: [LINK]
Hi there @darkmarkdesign!
Thanks for reaching out.
How large is the .json file you’re trying to upload?
I have the same issue. For me lottie files only work when I drag in a lottie element and THEN upload the JSON file in that prompt. If I upload JSON first and then try to assign that to lottie element (or even change a lottie element to use a self-uploaded JSON) it messes up and nothing is shown.
Might be a good idea to mark this as a #feedback:bugs as well.
196 MB. Is that too large?
@darkmarkdesign I believe you can only upload up to 10mb for Lottie files.
Are there any other ways to compress the file while maintaining its quality? Unfortunately I have to create a PNG sequence so I can maintain the transparency of the file.
Going from 196 MB to less than 10MB is gonna be complicated. Depending on your scene, you’d rather go vectors for lottie ( this is where it shines ) or Interactions for PNG. PNG sequences in lottie really shines for small renders but not fullscreen, Unless it’s a 100 frames max otherwise it’s almost always to voluminous and will hit performances.
Hmm, i’m not too familiar with rendering a vector sequences. So, I want to convert my .mov file to a vector sequence and then through the vector sequence in after effects to create the lottie through the bodymovin plug in? Sorry, i’m a bit lost in regards to the the process. Where should I start with my .mov?
It’s tough to help you without seeing the render. But if you have pictures with transparency, you won’t be able to use vectors, I mean you could vectorize the pictures in Illustrator but the results and advantages won’t be there.
If your source files is a video, why not using a background video element ?
How big is your source video ?
The file is created in blender and exported as a .mov file. Can you map a background video to scroll? So, the video is only triggered as you scroll?
The file is a a 3D water stream with a camera pan animation. So, I want the stream to gradually go down the viewport only as the user scrolls.
Also the video file is over 300mb
I’ve felt with a similar situation before. Certainly not a file that large, but at least 50mbps. What you’ll want or do is crop the video as much as you can stand without losing significant quality. For example, if it’s 3840x2160, maybe resize to 1280x720. Next, I’d cut out a significant amount of frames. Because most times a lottie is being used, it is reacting to a mouse scroll or a page interaction. You don’t need a sequence in 30fps when taking every 5th frame will accomplish the same effect. I’d cut out as much as you can before you lose the flow of the animation. Then export and include Images in JSON and turn on compression as well. I used these methods and decreased a 70mb file to 4mb on a png omg sequence that was also transparent.
Also, take the move file, export as an image sequence from After effects, then use those images to sequence your timeline.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.