Hi there,
I am following the “Add web animations with After Effects & Lottie” course from webflow university. I exported an animation from after effects using the Bodymovin plugin as instructed in the course, and when I import the json file into webflow, it displays as a text file/link and not an json animation. What is happening?
Howdy @Bartek_K and welcome to the community!
This is just how these files appear in the Asset panel, as they are technically just a text file, but they will work just fine when you plug them into the Lottie element.
Typically if you have any issues with the animation showing up in Webflow it’s due to either an animation type that Lottie doesn’t support (yet) or the image assets weren’t included in the export (if you’re using the image sequence type).
Hopefully that helps
Hey! Thank you, great to be here.
Thanks for your help, truly appreciate it, but I’m still not having any luck. I followed this tutorial word for word:
-
I tried exporting the json file several times, and tried checking the “include in json” feature in Bodymovin as well.
-
I exported the animation as a demo using Bodymovin where it creates an html file for you, and it plays in the browser just fine
-
I tried adding a lottie element, and attempted to import the json through it by clicking on “replace lottie sequence”, but my file simply does not appear in the assets folder on webflow.
I am using the most up to date After Effects and I installed Bodymovin just today for this purpose.
Ah, shoot—sorry to hear you’re still having some trouble.
Would you mind including your read-only link so I can take a peek?
Hey! Thanks for your help, and good news! I noticed that if I simply drag the json file onto the lottie element, it works, even though it does not see it as a compatible file through “replace lottie sequence”. Kind of odd, but I’m glad it’s working.
Glad to hear you were able to get it working