Streaming live at 10am (PST)

Using Lottie to control pixel video

I’ve been watching these new Lottie / BodyMovin videos and this is such an awesome new feature. These animations are converted to Json which from my understanding is .SVG based. Is there a way to use this same setup in interactions to control an actual movie (with pixels like a youtube movie) or does it have to be an .SVG based movie?


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

Some facts:

  • Bodymovin can export bitmap resources and include them in the json (Webflow doesn’t support external lottie resources, usually Bodymovin puts images in a folder aside by default)
  • to bring in an animation or movie, you need to import bitmap frames one by one, no animation or video format will be exported frame by frame. So import every frame as PNG
  • Bodymovin will re compress frames and ruin your super optimization = big files (30 frames 9 mo for a 500 × 600 px anim)
  • it’s interesting for importing 3D rendering that have alpha as lottie keeps alpha
  • it’s less interesting for videos, you have js scripts for controlling video playback already, you can’t use the power of Webflow IX2 to control the playback though
  • it makes 100% sense for Webflow to come up with the same playback feature but for videos and formats like APNG, Gifs

I did this experiment in a site that should go live within weeks, preview below. it’s rendered with alpha from C4D, imported as PNGs in AE, and everything fits in the json. Bodymovin exported something that’s double the size of my optimized resources… Not ideal.

Ultimately we need to be empowered to use video playback control with alpha, but I don’t know if it’s possible today.

2 Likes

Awesome, that makes a lot of sense. So, is there a way baked in to Webflow to play a movie file based on scroll or something like that? Or does it take custom code?

Awesome 3D example, this Lottie/Webflow stuff is going to be amazing.

There’s a way but you’ll end up with a huge file and spend hours crafting it.

Instead, you can use an mp4 and custom JS code. Google that, several solutions are available I believe.

1 Like

It is already :slight_smile: I just made an animated logo for my blog. there’s a loop animation and an animation on hover.

1 Like

Look what came out today.

I believe this is a video that explains exactly what you were talking about. Cheers!