Lottie is not rendering

Design help Animations & Interactions
#1

Hello! So far I have tried two different ways to create my lottie animation.

  1. I designed the vectors in illustrator using gradients and textures.
  2. I designed it in After Effects using gradients and, set matte and texture.

both ways my lottie not rendering correctly and not showing up on my webpage.

This is the result I get

Screen Shot 2022-05-04 at 12.56.49 PM
Screen Shot 2022-05-04 at 12.56.49 PM1920×1330 57.9 KB

This is the result that I would like

Screen Shot 2022-05-04 at 1.00.35 PM
Screen Shot 2022-05-04 at 1.00.35 PM1052×1042 97.5 KB

Any help would be greatly appreciated.

Here are my links
https://preview.webflow.com/preview/rose-fest?utm_medium=preview_link&utm_source=designer&utm_content=rose-fest&preview=6d664873254fb301e272f2925855fa88&workflow=preview

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

#2

Same issue for me. No idea what the problem is.

Screen Shot 2022-05-05 at 12.54.42 PM
Screen Shot 2022-05-05 at 12.54.42 PM1286×1326 65.3 KB

#3

Did you make sure you activated the “include in json” in the asset section of Bodymovin’s settings

around minute 6 Asset settings video

Also, if you import the json in lottie files, does it work properly?

#4

Hello! Yes it turns out lottie does not support certain effects like wave warp. I have moved on to using background videos. After I finally figured out how to export transparent background and thought everything was peachy now they do not play on mobile.