3 ms·
When I've used Lotte, the choice has been between Lotte and an mp4. Compared to the mp4, Lotte is much smaller.
by Wowfunhappy 1y ago
When I've used Lotte, the choice has been between Lotte and an mp4. Compared to the mp4, Lotte is much smaller.
- filcuk 1y agoThat comparison makes no sense. Apples and oranges.
- Wowfunhappy 1y agoThe 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 1y agoAre 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 1y agoThis 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 1y agoI doubt the designer did any sort of compression on that video. Animations usually compress very well.
- Wowfunhappy 1y agoThe 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."
- rchaud 1y agoMP4s 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 1y agoWhile 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 https://rotato.app/blog/transparent-videos-for-the-web
- ummonk 1y agoCan’t use SVG?
- panstromek 1y agoLottie is basically that (at runtime). There are different modes but the most sensible one is SVG + piece of JS that sets transforms on it.