Lottie with image not working - file structure broken

Design help Animations & Interactions
1

lottie-with-image
lottie-with-image796×692 87.3 KB

I have a Lottie that uses a single JPEG image, exported from Bodymovin.

It’s not playing and I think it’s due to the way Webflow is handling folder structure. The image needs to be in a folder called /images, which sits along side the Lottie. See the image above.

I have exported the code and then rearranged the folders in Windows, and run the site locally, it works then. So I could just do that, but it would be much easier to do it all in Webflow so I can quickly preview (I am playing with a lot of interactions).

Within Webflow - Can I just have the Lottie in the Root and /images next to it? I’ve tried. I’ve also tried putting everything into ‘/Documents’ - so ‘/Documents/Lottie.JSON’ …and… ‘/Documents/images/my.JPEG’

Just isn’t working though…

Here is my public share link: LINK
(how to access public share link)

2

Hi, I think I found a way around this in case you or someone else runs into this problem.

I had trouble rendering a 3D file and had to render it in a jpeg sequence. Basically it renders each frame as a jpeg, then you make a new composition and place all the jpgs in and set it so that each displays one frame at a time. When that’s set up, it should play just like the original composition. Then you can run it through Bodymovin and it will render just like a simple lottie animation.

The only downside is that it won’t be transparent.

Here’s the video I originally followed, from Webflow themselves: