What is Lottie and do I need it?

I'm JUST THIS MINUTE learning about Lottie files. Are they relevant? Doesn't hype do the same thing? Is there a cost associated with their production/use? I'm just curious. I understand there may be size savings associated with them also. I haven't dug very deep though. I'm 63. Is it time to stop learning yet?!! Lol.

There is an extension to play Lottie files in Hype. Lottie was developed as a plugin for Adobe After Effects a traditional video production software. It was initially called Body Moving but then purchased by Airbnb and re-branded as Lottie. It can export layers and vector information into Json files and it offers a player much like the Hype Runtime to display them on the web or native in iOS/Android. The production costs are quite high as you have to know and own After Effects but there are many sites with premade animations you can download animations from and even tweak the colors a little bit… but apart of that there is isn’t really an main editor outside of Adobe After Effects, but some animation packages allow you to export into the Lottie format and slowly it is becoming a synonym for animation on the web.

Thanks! I'd rather live without Adobe. But it's good to know. Thanks for the info! I didn't know you could do animations with AE.
Randy

This is a good question overall, so to expand a bit :slight_smile:....

At a high level to properly compare to Lottie, you can think of both as having three components:

  1. An application to visually create animations
  2. An exported file format that describes these animations
  3. A runtime that interprets this exported file format to play on some target device

With Hype, these would correspond to:

  1. The "Hype 4.app" desktop application on the Mac
  2. The filename_hype_generated_script.js file in the .hyperesources folder that contains JSON data and basic load commands
  3. The .html file along with HYPE-736.thin.min.js runtime file that loads the above script and displays the animation in a web browser

With Lottie, the interesting aspect is that the file format is open and a bit more the star of the show. Therefore there's more flexibility in #1 and #3:

  1. After Effects is the most common tool to visually create animations, but there are other tools that can do so
  2. Lottie's file format is a similar JSON file that contains descriptions of elements and animations
  3. Lottie has a web browser runtime, but also ones that can produce "native" animations and not go through a browser on iOS and Android

In this regard, Hype's major advantage is that it is specifically tailored to producing web animations. The editor environment is based on a web view, and the capabilities it exposes are based on what is possible on the web. Interactivity of web pages has also been a primary consideration to Hype.

Lottie, starting with After Effects as its visual environment, means that there is a discrepancy between the editor and the output, which may manifest in inconsistencies. An animation crafted in After Effects may look different than when playing in the browser, which may look different than when playing on iOS. (Sometimes this is subtle, or sometimes it may just mean capabilities are non-prioritized or use expensive tricks). The flipside is that with native runtimes, you don't need to load a whole browser stack to run a small animation for native apps. Also After Effects being a video app means that interactivity wasn't considered as much in overall capabilities.

Usually when folks talk about the space savings of Lottie, they are comparing to a video file that would have been produced with After Effects. Exporting just the description of animations can potentially save a lot of space, akin to a .png bitmap-ish file vs an .svg vector image.

A lot of folks have asked for Hype to export lottie files, this would therefore insert the Hype desktop application in the #1 spot above. There's mostly disadvantages to using a Hype-created lottie file on the web (since Hype's runtime is tuned for its own content). The main advantage is that you could then use Hype to build native animations, due to Lottie's native runtimes. It might also help some workflows that are lottie based, but for folks that would prefer to to use existing workflows that were based around lottie animations since it is pretty popular.

2 Likes

Hello.
As I like to create but I'm not so experienced in JS, I'm always looking for a niche and to observe trends.

Lottie has been growing steadily and is considered very important in the nocode context. I really wanted to be able to generate Lottie files myself - including for the marketplace - but After Effects compared to Hype is far too demanding. At least in my case.
And anyway, in the meantime, Lottie offers now the ability to animate SVG elements in the browser.

But the reason I'm writing now is that I found this tool today and it might be useful for those who want to experiment (exporting video animation from Hype + convert + editing with Lottie): Video To Lottie Converter - Isotropic Design

This is a very basic Lottie file created like that and integrated in an external solution:
lottie

1 Like

The SVG to Lottie conversion is pretty basic and the animations as well. They are very small but as seen in the examples integrating Lottie in Hype you need to load the Lottie runtime on top.

There is a slim Lottie runtime version, but it fails on certain features (much like the full and thin runtime of Hype). It hence has to be considered adding the runtimes KB's as part of the animation. Although if you have multiple Lottie animations on one page the runtime would only be needed once (much like Hype, apart from Hypes potential runtime versioning conflicts across Hype widgets).

2 Likes