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

[johnny9]

No luck with these.

qt.lottieqt.bodymovin.parser: assets not supported
qt.lottieqt.bodymovin.parser: Unsupported layer type: 2
qt.lottieqt.bodymovin.parser: Unsupported layer type: 1

I dont completely understand the lottie format but the latest Qt documentation (https://doc.qt.io/qt-6/qtlottieanimation-index.html) has some information about its limitations. This could end up being challenging. I think I'll try to create a simple test app for you to try loading your generated assets.

[BitBrujo]

Hey there. It looks like I may have rendered them wrong to begin with (using a standard Lottie plugin instead of the QT Body Moving Plug-In). This morning I downloaded the new plugin and tried to re-render the first 3 animations. So, here are three new versions.

BTC CORE_QT Lottie.zip

Try these out. If they don't work, then I would be willing to experioment and test with a simple test app.

Hoping this new plugin does the trick.

[GBKS]

Great progress on these. The animations are visually quite a bit different from the static illustrations. Any chance to matching them 1:1? I'm also happy to help with these if you'd like, maybe we can sort through these rendering issue together more quickly.

[BitBrujo]

Hi All,

Hmmm.... not sure what is going on at this point.
When I reviewed the Lottie .json files I uploaded (with the correct plugin) they seemed to have changed. It's as if some reference images in them were swapped with other images. I wasn't aware that the .json file pointed to other image files. This is getting confusing. Apologizes.

Christoph -- when you say visually quite different, I want to make sure I understand:

Here are stills from After Effects:

2) 3)

If they look different than this on your end, there is another, bigger problem.

---

So in answer to your question Christoph, I can change things if needed, but I want to make sure we are actually looking at the same things, first.

Here is an update AE project file.

Bitcoin Core AE 2.zip

[GBKS]

Sorry, I mean the design in Figma, and the animation. Below is an example. Left is the Figma illustration, right is the animation. There's a huge difference and it would be great if they could be the same.

[BitBrujo]

@GBKS

Ok, got it. You seem to be really fixated on those little numbers :)

Well, the animation will need to be changed. You have any storyboards for that? Or is this part of a long process?
I can give this one another try.

This is how I see it going forward:

1. RedDot -- this is very basic and already matching.
   To do -- test final .json

2. Download Node -- you would like to add the little numbers and create an entirely new motion animation
   To do -- keep working on the animation until everyone is happy then export .json

3. Strengthening the Network -- I'm guessing you would like more node connectors lines to match the Figma file
   To do -- keep working on the animation until everyone is happy then export .json

4. Blockclock -- this one I've been working on, but even trying to do something that does not match the Figma file is proving challenging. I will not be able to match the animation. This one needs help. You have something specific in mind -- go for it, especially if you'd like it it match.

[GBKS]

Haha, yes, I love my little details and pixel perfection. I gave it a try creating one that is an exact match. Below I included the render as a video, Lottie JSON, and I also published it to Lottiefiles here (you have to change the background color to black).

Was trying to go for a staggered effect, where the bottom block slides down first and then pulls down the other blocks (an alternative would be a block coming in from above, creating pressure and pushing the other ones down in a staggered fashion). It's 6 seconds and loops, since the new blocks coming in from above are identical to the ones that slide out. How does that look?

blocks.mp4

blocks.json

@johnny9 could you maybe do a quick test with this JSON file just to see if it works on your side?

I am also realizing that we may need two versions of each animation for light and dark modes. The white boxes will now show up on a light background (we also have light and dark static illustrations).

The block clock one is really tough. Let me take a look and think about this one for a bit.

[GBKS]

First stab at a block clock animation. Except for the dark circle, all the elements slide/fade in in a staggered fashion. Then blocks start ticking by, with both the numbers and circle segments appearing. It's definitely not final. Too hectic, and there's no loop, but I wanted to see first what you think of this direction before spending more time (seems to render fine in web Lottie from a quick test).

Block.clock.animation.mp4

[BitBrujo]

@GBKS

The block sync looks good. Very simple—more simple than I was thinking. I never would have tried that :)

The block clock — boy, I’m not sure. This is kind of the problem I was running into. Tracking the tick marks AND the numbers is almost too much, simultaneously. At one point I tried it with a percent and it was still a little much (but closer).

Maybe it would be better to think of this animation SEPARATELY from the download clock that will be featured in the app, and really simplify the concept? Maybe it’s focus should be more about 10 minute intervals to match the copy? Maybe a bigger, bolder colored ring? Just some thoughts.

[GBKS]

I created updated animations based on all the variations above.

Block clock
This one now starts with just the peer dots, starting to connect to peers. Then it transitions to the full block clock. Not 100% happy with the initial bounce in of the dots, need to tweak that still.

block.clock.mp4

Blocks
Pretty much the same as the previous version I shared. Slight difference is that the new block pushes the existing blocks down, rather than the existing blocks making space preemptively. Feels nicer that way.

blocks.mp4

Notifications
Kept this one very subtle because. It's a slow pulse, just like the actual notification will be a slow pulse of blocks coming in via the node. And a calm appearance makes it more clear that we won't spam notifications.

notifications.mp4

Nodes
I slowed this one down to where the dots appear (almost) one by one and start making connections with each other. Similar metaphor to the dots connecting at the start of the block clock animation. This one feels the least finished yet.

nodes.mp4

Anyhow, hope it's a good update. Would love to hear what you think and then wrap things up and get them in app.

[BitBrujo]

GBKS,

These all look good.
I think the block clock works much better in this version. The viewer's eye really can focus on one thing at a time, much more effectively.
For the nodes, I really enjoyed how the nodes built out in the beginning--really gets the point across.
I'm sure you've thought about how you intend to handle the looping of these.
Thanks for cleaning this project up.

[mouxdesign]

These all look great and almost ready to roll.

The favorites are the nodes and the blocks. Agree that the peer dots in the block clock animation could be a bit smoother.
So far everything really looks smooth. Thanks for wrapping this up.

[GBKS]

I just updated the web prototype with the animations (for dark-mode only, using lottie-web). The animations are on the "Strengthen bitcoin", "Block clock intro", "Initial download", and "Notification permissions" pages.

The "Strengthen bitcoin" and "Block clock intro" animations only play once and do not loop automatically. But you can click them to restart. The other two animations auto-loop.

Check it out

Realized I need two different versions of each animation, for light and dark modes. Just means switching out some colors. Added to my list.

[GBKS]

The web prototype now also has animations with light modes where some of the colors are switched around.

[GBKS]

Johnny created a test application to run the animations in Qt/QML here. Unfortunately, they are really broken. The application will update to a newer version of Qt soon. And since Lottie support varies by version, we'll just put a hold on this for now. Once the version is decided, we can then do some tests to see which specific AfterEffects features are breaking things, and then work around them. It's unfortunately not an exact science (and the animations already consider the restrictions described in the Qt Lottie docs, so there must be something else).

[BitBrujo]

Oh boy. Thanks for the update. Understood.

[rabbitholiness]

The animations look great. Especially the block clock is awesome.

[jarolrod]

@GBKS aside from these animations, are we looking at and considering other animations for general tasks, icons, etc (where they are appropriate). I think animations when used appropriately really polish the UI.