Lottie – Use after effects animations in web and native apps
airbnb.io
airbnb.io
[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
How's the non AE ecosystem for Lottie?
By avant-garde stuff I mean for example this guy’s work, he’s a killer: https://dribbble.com/glebich
Skia powers Google Chrome[2], Flutter, & Fuchia[3].
[0]: https://skia.org/docs/user/modules/skottie/ [1]: https://skottie.skia.org/ [2]: https://skia.org/ [3]: https://skia.org/docs/dev/flutter/
https://lottiefiles.com/plugins/animate
PS: I work for LottieFiles and built the plugin.
https://docs.microsoft.com/en-us/windows/apps/design/control...
Disclosure: I work at Microsoft.
ActionScript and Flex were more powerful than JavaScript and HTML, still the latter won because it was open.
I did Adobe Air desktop applications and there was no issue with scaling the application to different sizes, the Flex4 framework is still one of my favorites for layouting Applications GUIs for sure 10x better then web GUI frameworks, sometimes I wonder if the creators of angular ever in their life created a desktop or mobile application because for me the architecture seems stupid or created for a weird target audience.
The first time I heard about it was on a JavaScript meetup, where a guy praised it as the best that ever happened to JS.
He said multiple times "Yes, and we had some issues... but they came from the fact that we didn't do it like Angular intended, when we rewrote as the maintainers explained, it worked!"
I never touched it.
Went from ExtJS4, to Ember.js, to React and then I stayed there.
Especially with a team made up mostly of folks with less JS experience, you could better sustain velocity because you just needed one or two people who could build custom controls and otherwise handle complicated stuff, and most folks were perfectly able to build and ship features without nearly so much risk of spaghetti complications as you'd find with a less rigorous framework. That made it a good teaching and learning tool as well; you could start off a junior with a base of AngularJS-specific knowledge, and then generalize that into understanding JS proper and being able to work outside the structure AngularJS provided.
I wouldn't want to go back now, but I did and led a lot of good work with AngularJS, and used it to great effect as a mentoring tool besides. In the context of its time, it was brilliant.
But at the time of Angular's release, ExtJS was already 3 years old.
It did not provide simple controls either, no basic DropDown or DataGrid,ListBox. It only made super easy to make Hellpo world apps with the 2-way data bindings and that is all, when things get complex angular can't also gets super complex.
Before Angular, Backbone was all the rage (2013) which started the whole front end framework trend and effectively killed jQuery (which was only really good for manipulating the DOM because JavaScript was so fragmented since not every browser supported the JS function... eg. IE6).
Essentially Angular wrapped everything into a nice gift that included Backbone-like MVC type architecture (MVVM), KnockoutJS, and Mustache for Templates (Similar to ERB for Rails?).
I'm definitely incorrect in the descriptions in the plumbing because it feels like ancient history now. Essentially Angular is just a framework like Rails for the Front End. Difference between ExtJS is that it's more heavily into the way the UI widgets worked and behaved whereas Angular is more for the Business Logic and the way the Client Side is structured.
Honestly I have no idea why would you compare angular with Rails, it includes some basic routing, and some pathetic wrappers for existing native functions, and the $emit/$on , what other plumbing I am forgetting ?
There are still a ton of super quality jQuery plugins for Widgets that are still used today, I seen a lot of angular code just wrapping (badly most of the time) jQuery. And on top of that angularjs used jQuery (or a lite version) too.
Did you wrote desktop or mobile application with the native toolkits ? I am curious if the misunderstandings are because if you only used Web tech then angular would appear to be something great where if you come from Desktop/Mobile you see angularjs as garbage, better then bad jQuery code but probably worse then anything else.
<DropDown dataProvider="someArray"/>
for a bit more complex stuff you have have attributes like
<DropDown dataProvider="someArray" labelField="name"/>
and for custom stuff you provide your own render function
<DropDown dataProvider="someArray" itemRendered="myRenderFunction"/>
With this architecture 99% of cases will not requiere custom code, just setting some attributes, and the 1% you create your function that paints the item in the list. For all you get for free all the DropDown functionality, like keyboard shortcuts(arrow keys, Enter) . accessibility, all the events(before open, open, opened, before close, closed, hover ) in angular world if you are not super lucky to get pro developers with good angular experience you get a giant mess. They added components much later , not sure what was in angular team head not creating the component stuff from the beginning (I inherited a code base before components were invented in angular)
Edit: maybe angular was better then jQuery or whatever stuff was there in JS world but my issue is the guys that created it appears that they never created desktop or mobile apps, is like soem Google devs in their free time invented this shit from scratch with ZERO experience in GUI toolits, in fact I am wondering how big is the ratio of quality code /total code Google devs are creating. I hope their Fushia team has some competent experienced developers in the team.
True, but you only needed one good Angular dev, in a senior or lead role, to avoid that. I had the enormous privilege of getting to be that person a few years back, and maybe that colors my interpretation a little.
> They added components much later , not sure what was in angular team head not creating the component stuff from the beginning
My impression is that Angular 2 grew components largely in response to and because of React. The concept wasn't precisely new, but React did formulate it in a way that can be fairly called novel.
I can't find 1 good thing to say about angular1(version <=1.5) compared to Qt,WPF,Flex4 . Let me know if you worked with that old version any good thing about it (that is not it is a bit better then bad jQuery code)
I used react a few years ago, this tool made sense, you create Components and you implement render functions(I even used it without JSX to understand it better), the nice stuff about react was that I could put breakpoints in the code and understand everything. I did not used React recently and I am reading that the develoeprs over-complicated it.
What was great with Flex4 ,WPF, Qt is that you had enough components in the base that you could write your application super fast, I would only create custom components in rare cases like when we needed to show some graphs and bar charts, and creating custom components just implied extending a base Widget and override the render/paint function.
Yeah, I am frustrated with Web frontend and angular, my latest issue was when i deleted some unused property of an object and a GUI just stopped working(blank) without any warning or error, I could not figure this issue in a few minutes so I passed it down to the angular expert (is still not fixed yet so I am not sure what caused it it and especially why no errors)
For me the canvas was powerful, I could use a wacom to draw, tween motion between frames and visualize the whole thing quickly with playhead scrubbing, and keyframe tweaking etc.
I don't miss Flash but it would be really interesting to see how it would be used in today's mature webscape.
Now you kind of have to think in code, and architect the site as a whole, there's less creative impulse, or simply messing around to find something cool. This interactive messing around has to be visual, ideas should be easily copy-pastable, etc.
Because it was easy to experiment with the whole interactive media, and you didn't really have to worry about differences in player (no touch, no mobile, player was independent of browser), you could create wild stuff in very short amount of time, and everyone could play with it in the same way.
I loved Flash. Sure, it wasn't accessible, wasn't SEO-friendly or searchable or linkable, and had no future in mobile, but it was a magical creative canvas quite unlike anything available now.
But on the other hand a 12 year old can’t figure it out in a week and ship an animation they made from scratch to the web.
- Click button X, run Timeline 1. - Click Button Y, run Timeline 2. - Click X again, run Timeline 1 in reverse.
That made it far more intuitive for designers, who can prototype interaction design ideas themselves, instead of leaving it entirely to developers to implement.
The death of Flash led to the death of the creative web, because anything outside of the bounds of CMS templated content required developers to do everything from CSS, JS triggers and deployment. Even today, that workflow persists, but is worse, because creative works can't be bundled into a single executable file like what was possible w/ Flash . Designers now create something in After Effects, which then has to be compiled into code via Lottie, and implemented by a developer.
Now imagine what it means today to create a simple animation, export it to Lottie, incorporate that into a website and publish that. It’s a nightmare. And it’s nowhere near to what was possible with Flash.
Today it could be a paradox of choice situation, for an aspiring creator to produce anything today would require them to pick up a bundle of technologies.
"Solve" is weird in this context, but Adobe did make good progress in each of these areas, first by supporting some of them in Flash Player, and ultimately by abandoning the proprietary runtime.
> Building a website with the level of interactivity, micro interactions and animations using today’s technology is super complicated and almost impossible for a single person.
Flash was never for this (other than in a "if all you've got is a hammer, everything looks like a nail" sense), but if that's your benchmark then you can still do that with Adobe Animate.
You'll be happy to learn that Adobe Animate is the Flash Professional (née Macromedia Flash, née FutureSplash Animator) development tool/experience: https://www.adobe.com/products/animate.html
https://lottiefiles.com/plugins/animate
Disclosure: I work at LottieFiles.
And of course, if you're an engineer and this appeals to you, get in touch! Email in my profile. I love working on software that facilitates creativity.
Might partly have to do with the addiction of JS folks to bundle everything into one file, but it might be a good idea to `fetch()` your lottie animations lazily when you actually need to display them.
Not sure that all, most, or even many JS folks are addicted to bundling everything into one file.
We built dotLottie[1], a little superset encapsulation layer ontop of Lottie as an experiment/solution to make it easer to bundle multiple Lotties and any associated assets AND make distribution/CDN use simpler. There are several sites that are using it now with good success.
I wrote up a starter blog on using Lottie for UI in React here: https://labs.thisdot.co/blog/using-lottie-animations-for-ui-...
If you don't want to make your own animations, you can download a ton of free ones to use here: https://lottiefiles.com/
But trying to go "all in", animating every little aspect of intersection as some of the showcases do, isn't worth it. Hard to maintain, since you need someone good at after effects to make an effect every time something on the frontend changes. And few designers know AE. So quickly end up with some parts being fancily animated, and the rest dull, making the contrast jarring. And while the animations when clicking 5-stars or whatever look cool in a video, they are mostly artificial delays for the user getting on with their tasks.
However I prefer Hype (from Tumult) because it’s found that middle ground in simplicity while still being able to integrate real-world web. For that reason a designer(or coder really) can pick up Hype and not need anyone else. It reminds me a little of Flash, but the underpinning technology is javascript.
For example in Hype it’s straight forward to build animated and compliant html5 google ads. That’s something a designer can do all on their own without any coding, the entire process is contained to that one app. Similarly a designer can make a fully animated reactive website and not need to touch code at all.
Also Hype is $50 once. AE is either $240 per year or part of the Adobe creative cloud subscription which is around $600 per year.
But modern browsers do movies (like, mp4 and ogg) really well, with no required chrome, a rendering engine that is very good and easily controlled by js.
I wonder how a animation in Lottie compares to a embedded video tag of the same animation.
Isn't js JIT (slower), and evaluated higher in the stack (slower) than the video renderer?
I realise now you can bake in an alpha channel to some video formats, but both support and production of these files is cumbersome and Lotte is great from a workflow perspective -- particularly if you have dedicated 'motion designers' on your design team who are accustomed to After Effects already.
Little uses a vector format, so the results are sharp whatever the scale, with the same file size. However, each additional picture element may cost more in comparison.
Some animations will be best in one, some in the other.
Here is how to export to Lottie https://synfig.readthedocs.io/en/latest/export/export_for_we...
To fill that need I've been using svgator (https://www.svgator.com/) to create some simple animations. It can SVG files with embedded animations and no JavaScript.
I have haven't gotten too deep into it, but as someone who has done quite a bit of work in Flash, Adobe Premiere, and Final Cut Pro; it seems to be a pretty full-featured animation software. I didn't have to read any documentation and got my animations finished quickly.
There is an amazing collection of animations to choose from here: https://lottiefiles.com/.
You can also buy after effects templates on many websites and use them for motion graphics.
Edit: seems svg-like particle effects only, so no