extension
extension copied to clipboard
leather-wallet
Animate the Ledger illustrations
We'd like to animate the Ledger illustrations to add more delight to the experience and also reinforce the physical interactions required to operate the device. This could be done after the feature release, but we'd like to get ahead with the design.
Scope
We currently have 7 illustrations where we could add motion. It would be worth reviewing the illustrations to make them similar in proportions so it can be easy to transition from one to the other. We have plans to add transitions between each step, to add more fluidity and further enhance the experience.
- Connect: plugging the Ledger into a computer
- Connecting: Could be a subtle variation of the previous one (or we re-use 1)
- Success: Green checkmark
- Verify: focus on pressing both buttons and checkmark
- Error: Generic failed ledger
- Disconnected: Ledger unplugged from computer
Approach
We are going to work with @eugeniadigon and a motion designer for this. I believe we haven't implemented these kinds of animations before in the Wallet, so wanted to check with @fbwoolf @kyranjamie if there are any requirements regarding the format of the animations. Is there anything you'd want to test first? I'm thinking we could do an early test to check performance and file size if needed.
References
- Sonos mostly for the subtle transitions between steps and animations, which we could add at a later stage.
- Ledger has a very nice onboarding full of Ledgers (of course!)
https://user-images.githubusercontent.com/239215/158643574-2b579b03-0506-4ed1-8c7e-576ed2dd256f.mov
https://user-images.githubusercontent.com/239215/158643813-f17b576f-5daf-42a4-9c13-5ca5acc78bbd.mp4
Love this.
I don't think there's much to consider by way of constraints. We'd likely use a library like react-motion or react-spring if we have a vector-based animations, or just a plain animated SVG (if it's simple)
Assets will be bundled with the extension and loaded from disk, so file size is less of an issue than were this a website.
Would about the Lottie format? I think it's widely used for motion animation (specially coming from After effects and other GUI motion software)
@eugeniadigon found an additional one we could animate, the disconnected state. This one should probably not include the (!) as part of the illustration, as I'm still refining this screen. I'd consider the ledger only as part of the illustration/animation.
@markmhx @landitus @kyranjamie
-
Here's the figma board with the storyboard/UI reference of each animation
-
And I'm attaching two files, one with the mp4 preview animations, and another one with the JSON files
Json-20220329T135128Z-001.zip Mp4-20220329T135125Z-001.zip
thanks @eugeniadigon ! These are looking awesome! As a first review, as we agreed, we can focus on the first animation for the Connect screen. This is actually the most complex to position in the widget, since it has taller proportions. As you can see in @kyranjamie first test, the ledger looks off-centered because of this, and my goal is to have the Ledger LCD screen be the focus and center of the animation at all times. Also note that in the mocks, the animation will be positioned with 40px margin to the sides of the window.
I've mocked in Figma how it looks when centered, and though some parts get cut off, I think it looks better overall. We can work with the animator to fade the elements off-screen, for example.
Off-centered
Centered
Additionally, for the connect animation, I believe it will look better without the flashing green buttons. It takes the focus away from the LCD screen with the Stacks app logo. Actually, we could play with the logo and animate it like Ledger does when selecting apps in the menu. Here's a preview:
