I rendered out an AE animation using BodyMovin’ and placed that .json file inside a div using webflow. There’s an intro animation that I want played before the site opens, and then I have a second json file that starts playing halfway through the site. They both work great in Chrome, but are very spotty when using mobile or Firefox or IE. I can’t figure out what I’m doing wrong, and need to get this site on the web as soon as I figure this out. Anyone have any suggestions?
I think I know why this is happening. When I created the shape change animation in AE, I exported creating a .png sequence, then imported the images into AE and created a lottie using Bodymovin’. In the settings under Assets, I selected “Include in json”, which is how I was taught how to do all that.
I just found out that because I was rendering the lottie in Weblfow as “SVG”, it would play back flickered. SVG doesn’t like image-based lotties (maybe one day somebody could fix that).
Fortunately, I found out this can be done: