Comment by circlingthesun | Hacker News Reader

Comment by circlingthesun | Hacker News Reader

Lottie files can be converted, with some limitations, to native SVG SMIL animations via bodymovin-to-smil [1]. With SMIL animations you save 66.6k worth of gzipped javascript [2] and your animations run before any javascript kicks in (great for above the fold animations). SMIL seems to have gotten little attention as Chrome intended to deprecate it 6 years ago [3]. That seems no longer be the case [3] and now that IE 11 is dead, SMIL is supported by virtually all modern browsers [4]. We used SMIL animations on our home page [5] and it works really well. It would be great (for our designer) if bodymovin-to-smil supported more lottie features though.

[1] https://www.npmjs.com/package/bodymovin-to-smil [2] https://bundlephobia.com/package/lottie-web@5.8.1 [3] https://bugs.chromium.org/p/chromium/issues/detail?id=482689 [4] https://caniuse.com/svg-smil [5] https://bookem.com

I love SMIL. Have been using it to craft custom SVG loaders for almost every brand I've worked with. Loader is usually much smaller than a gif, vector, animated 60 FPS, etc. So good.

Do you have any resources on how you learned to create such loaders? I hacked together a custom loading animation for some tools I've built just using images & css transforms, but would love to learn to make things even slicker.

Not quite, I've learned it by looking at MDN and some other samples. Maybe I'll write up a tutorial for others.

I'll have to try out the bodymovin-SMIL plugin. I've long looked for a tool to generate SMIL animations, but I always end up just writing them by hand [1], which gives me much greater control... I've even wondered from time to time about building an SVG animation studio myself, as admittedly, designing and animating in code is not for everyone.

[1] https://www.pcmaffey.com

I saw your site yesterday and forgot to comment on it then - I wanted to say thanks for the great articles and interesting animations.

Reply on news.ycombinator.com