Wowfunhappy 5 days ago

When I've used Lotte, the choice has been between Lotte and an mp4. Compared to the mp4, Lotte is much smaller.

3
rchaud 5 days ago

MP4s don't support transparency, so using it would rule out all but a small sliver of animations where the video background matches the web page background. If the webpage background has a gradient, the animation won't blend in. Same if the page has a light/dark mode toggle.

mindhunter 4 days ago

While MP4s don't support transparency, both HEVC and VP9 do and their support is very good these days. I just recently used these formats to add a complex After Effects Animation to a website. It's a bit of extra work to encode two videos instead of just one but the result is great. I used this tutorial: https://rotato.app/blog/transparent-videos-for-the-web

rfl890 4 days ago

vp9 & av1 yes, hevc no. I personally own devices which don't support hevc because of licensing reasons.

rchaud 4 days ago

Remarkable that after 30 years, and all these changes, the GIF reigns supreme. Works on every browser, supports transparency out of the box.

filcuk 5 days ago

That comparison makes no sense. Apples and oranges.

Wowfunhappy 5 days ago

The designer has created an animation in After Effects which has to play at some location on the web page. I can have the designer export a video and insert it that way, or I can convert the AE file to a Lotte animation. It looks the same to the user, so it's ultimately just a matter of bandwidth.

sampullman 5 days ago

Are you sure Lottie + SDK is heavier than the mp4? For one or two animations that hasn't been my experience, especially if you can do WebM and fall back to optimized mp4.

Wowfunhappy 5 days ago

This was at least six years ago. At the time, yes I'm pretty sure Lottie was a lot smaller. However, iirc we largely abandoned it in favor of videos anyway because the lottie animations wouldn't render correctly without additional work.

robertoandred 5 days ago

I doubt the designer did any sort of compression on that video. Animations usually compress very well.

Wowfunhappy 3 days ago

The less-abridged process was "the designer exports a ProRes video, and I (personally) spend an hour experimenting with different ffmpeg settings to get it as small as possible while retaining a level of quality the designers will accept."

ummonk 4 days ago

Can’t use SVG?

panstromek 4 days ago

Lottie is basically that (at runtime). There are different modes but the most sensible one is SVG + piece of JS that sets transforms on it.