Create Lottie animations for the onboarding flow

[GBKS]

We have some illustrations we show during onboarding that could be animated.

Note that we can also update these illustrations, they are not set in stone. Certain styles lend themselves better to animation than others, so this may be warranted.

I think the process would be:

• We find references to cool animations that we like and would work well here
• We pick one of our illustrations and do a proof-of-concept animation
• We pick our animation direction and do the rest

I have done all my Lottie animations in AfterEffects, since it has an easy plugin for export. Maybe something has changed, but that would be my go-to tool.

[BitBrujo]

I found some reference animations and I gathered them together on this Figma file.
You can view the animations by playing the frame in prototype mode.
If anyone has more references, please add them and then we can discuss and make a selection.

https://www.figma.com/file/ORktkqxw51n42sZ1O1x0BS/BTC-Core?type=design&node-id=5%3A6161&mode=design&t=Cc6b9pAAUe0Cc0QV-1

[GBKS]

Here's an idea for the network animation. You think this works overall?

Comp-node-illustration.mp4

[BitBrujo]

Yes, I think this idea works. Thanks for mocking this up, because in my mind, I was seeing the nodes rotate and it was getting very complicated. The idea of "strengthening" really comes through, I think.

[BitBrujo]

Here are 3/4 Lottie animations.
The blockclock looked good, until I tried to export a Lottie version, then it broke.

https://app.lottiefiles.com/project/0601e63b-e9e8-46da-9c6d-71b4152c7083

I'll include the After Effects file in case anyone wants to make changes.

Bitcoin Core AE.zip

[GBKS]

Hm, I cannot access the Lottiefiles link. Is it set up for public sharing?

AfterEffects -> Lottie export is super tricky. You can only use some very basic AE features and need to keep compositions flat (little to no nesting). It requires doing a lot of things manually and thorough testing if things render well in Lottie. Unfortunate, but it's just part of using a super-powered animation tool to generate basic SVG animations.

[BitBrujo]

Here is a cleaned up project file, in case anyone else would like to make changes.

Bitcoin Core AE 2.zip

[johnny9]

@BitBrujo I have been experimenting with loading lottie files into the application and I am ready to try to add these to our onboarding flow, Can you republish the lottie files or share them with me on lottiefiles.com. I created an account and this is my profile https://lottiefiles.com/hbd26js5pgddz1i7

[BitBrujo]

@johnny9 Here are the first 2 animations. I'm still working on the last 2 animations. I'd love to get feedback on these first 2 to see if they work.

I'm attaching the json files and a share link, so you can use whichever one is more useful.

https://app.lottiefiles.com/share/f6dbf550-311c-4032-8124-3e54925cd9fb
https://app.lottiefiles.com/share/1349750d-658e-4c01-b13d-fcedf3578b1f

BTCCore App Lottie_1.zip

[BitBrujo]

@johnny9 Here is the 3rd animation, still working on the 4th.

Node Network 4.json.zip
https://app.lottiefiles.com/share/f8db0eca-3e1d-46d1-9805-bd19a7f90e1f