DDDlottie21

Material for my Whole Lottie Tools animation talk at DDD 2021 conference in Perth, Western Australia

Watch the video now on YouTube.

For UX animation basics see my DDD 2019 talk on animation.

Authoring Tools used

I am using a Markdown approach using markdeck which augments reveal.js with a bunch of other goodies. This also embeds the Lottie Web Player enhanced by Lottie Files.

I first used it in 2019.

To have a live site running the slides, so I can show the Lottie Web Player use simple server to serve locally via python just python -m SimpleHTTPServer which works on either Mac or Windows.

Tools Being Discussed

• Flow
• Keyshape
• Synfig
• Cavalry

With live demos of the first three.

Update 2021-10-01 since I did the presentation, Flow have come out with an amazing series of videos showing off more advanced use but also some great tips on animation in general.

Output from the live demos

See the animationOutput folder for the art generated during the live demos:

• Synfig Studio - recordingDay.sifz
• Keyshape - 11655-hamburgerColored.keyshape and the json file
• Flow - see the starting file animations/DDDlogoToAnimate.sketch and all possible animations in the folder DDDlogo, not just the Lottie-Web sample

Other Attributions

Lottie Files used:

As per their CC license:

• Hamburger by Ian Roberts
• Menu Volver by Luisa Fernanda Bolaños Beltrán
• Jump by Luisa Fernanda Bolaños Beltrán
• Checked loading by Luisa Fernanda Bolaños Beltrán
• Melting Lolly by smalloranges