Importing Lottie files

[bwood]

All round, it might be easier to produce a small animation in Xara rather than mess with these files, although I do see them a lot in websites.
Thanks all
-Bill

[handrawn]

in what format ?

for motion graphics [the sort of animated shapes that you see on websites and presentations] these files beat anything xara can do in terms of scalability and file size

only down side I can see is the cloud hosting

[Acorn]

You can generate with After Effects or on-line, lodging in the Cloud, but you can deploy your JSON LottieFile from your own server thereafter: https://css-tricks.com/animating-with-lottie/ & https://airbnb.io/lottie/#/web .

Getting the js right is the main grief.

Acorn

[Egg Bramhill]

Cheers for the links Acorn.

I was merely trying to answer Bob's op re whether it could be included in a Xara website and indeed it can.

However there are two questions that jump to mind.

It appears to be very Adobe After Effect centric. At £20/month that may well beyond many members price range. I've only looked very briefly but I can't find a cheaper json creator tool, nor animation tool.

Secondly I've not been able to find a way to compare Lottie file sizes against an svg file size, nor had problems with my created animated svg's displaying on various platforms.

[Acorn]

Egg, here's an approach:

• Log into your free LottieFiles account.
• Export an SVG design from Xara.
• Add to https://lottiefiles.com/svg-to-lottie/convert.
• Tweak your animation.
• Download the LottieFile (*.json) to your local filestore.
• Go back to LottieFiles > My Private Animations > Click and get its Asset Link.
• Open https://lottiefiles.com/web-player.
• Paste in the Asset Link.
• Change the Width and Height values to 100%.
• Make your other adjustments.
• Copy the Generated Code to a Xara Placeholder Body (code).
• To replace the Cloud animation with your local one, select the Placeholder and press Shift+Ctrl+Alt+A and attach the local JSON file.
• Change the Placeholder code from <lottie-player src="https://assets1.lottiefiles.com/packages/*.json ... to <lottie-player src="index_htm_files/packages/*.json...
• Move <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> to Website > HTML Code (head).
• The hard bit would be to use the https://lottiefiles.com/tools/json-editor to tweak a design further.
• You may be able to use https://inkscape.org/~mattia.basagli...e-importexport.

Acorn

[Egg Bramhill]

That looks promising Acorn. Loading from the local server would be far better than loading from a site that may/may not dissappear.

My main concern is the very small lack of animation features and is it worthwhile regarding the file-size savings between animated svg's that I can create using svgator over lottie files.

[Acorn]

Egg, the few animations are just what I've found. There are many thousands of built animations already created so there will be a product along sometime that will do it for you.
You can probably stack Players. Inkscape might be a winner.

Acorn

[Acorn]

After a lot of searching, the one to watch out for is Haiku: Lottie Without After Effects. Animating UI with Haiku | by Taylor Poe | Haiku Blog | Medium.
There will be a free Windows package in due course...

https://medium.com/haiku-blog/lottie...s-9c5a8e74c239

Acorn

[Egg Bramhill]

Yes, came across this earlier Acorn but it's a work in progress as you state so not a great help at the moment.

[Boy]

After a lot of searching, the one to watch out for is Haiku: Lottie Without After Effects. Animating UI with Haiku | by Taylor Poe | Haiku Blog | Medium.
There will be a free Windows package in due course...

https://medium.com/haiku-blog/lottie...s-9c5a8e74c239

Nice article, Acorn. It seems that Xara missed out on another opportunity, this time by not further developing the animation design and export features of XDP. But who knows? Perhaps management is rediscovering what a treasure chest it actually has with this still (at least, partly) brilliant app and its visionary designers.