I was unaware of Lottie animation files before Sparkle 3.0. I had to do some quick research. Apparently javascript powered animation files.
On the Mac App Store, I found a neat $30 app called Keyshape that produces animation file formats including Lottie. Here’s a list of export formats:
It would be so nice if we got Lottie animations on scroll
They do that automatically.
Keyshape doesn’t actually produce Lottie animation. It just outputs graphics (SVG’s) that can be used to create a Lottie animation. What is needed to create Lotties are SVG’s and .JSON files.
Lottie animation was created by Airbnb to replace GIF’s. While Lotties are smaller in size than GIF, there are limitations to Lottie animations. GIF’s are larger because they can create richer animations. Think of GIF’s as small movies.
Airbnb uses Adobe After Effects along with two plugins to create Lottie files. Sketch can output SVG, but not .JSON. Affinity Designer can output both SVG and .JSON.
With Sparkle 3 95% of users will download stock Lotties (what few exist) from the web while 5% will create Lotties form scratch. Lottie animation is very new technology. Kudo’s to Sparkle for getting out on the bleeding edge here, but it remains to be seen wether Lotties are a fad.
Did I misunderstand the Keyshape information? I understood them to say that with an optional plugin Keyshape can output the necessary components of a Lottie file.
With regard to Affinity Designer, there is no ability to create an animation. There is no timeline or keyframe editor.
I talked to someone who used Keyshape and yes it needs plugins (two actually as does After Effects), but the output was not a usable Lottie file on it’s own. The Affinity Designer output files still have to go through a third party Lottie editor to create a standalone Lottie animation. The Affinity Designer output files can be dropped into Xcode without any further compiling/editing. What I don’t know is how Sparkle handles those files. Lottie is so new everyone is still experimenting.
I also bought keyshape a while ago, and yes it can produce standard lottie files via plugins.
That’s what I get for breaking my own rule of not commenting before experimenting with it directly myself!
Thanks @duncan
FYI Working fine here using Keyshaper (1.11.3) + Lottie plugin (1.6.2) exports usable .JSON / smooth playback on safari (Mac & iPhone).
I have used Keyshaper to spice up my hero image with some subtle animation. My intention was to export it with the Lottie plugin and replace the static SVG image that I was using. But then I discovered that lottie files can’t be used at full page width. So although the Lottie animation rendered with Keyshaper runs smoothly, I eventually chose to export this animation in SVG with CSS animation.
So I guess it depends on the use case what file format is best. I have some animated icons on the the site where Lottie seemed like the best solution.
https://www.theoybema.nl
But this got me thinking: What exactly are the advantages of Lottie animations over SVG?
I can imagine that Lottie animations run smoother in some situations, or more stable, or more processor friendly. But in my own work I don’t see any difference.
Lottie’s blog site shows interesting interaction options via javascript, for example for scroll and mouse rollover. Sparkle doesn’t offer those features yet, but I hope this might become available in the future.
Since Sparkle 3.x has been out for a while now, I’m curious how others are implementing micro animations and animated icons. Are you using Lottie or SVG or something else? Has anyone tried to make animations interactive through scripting?