Xapo — Bitcoin Debit Card (animation)

Here's the animation of the images and of the elements in general.

It's very easy to go nuts with animations and lose the focus of what is really communicating and helping the user, instead of just adding noise. This was a great opportunity to put those concepts into practice, and make something that was immersive enough, but that at the same time was functional. I used a pause between the loading of the text and the zoom-in of the image to give the user time to focus on the content, and show that the image responded to the text, and not the other way around. Unfortunately we didn't have enough time to tweak the animations to match this in real life, but still was a nice exercise.
I also added a subtle parallax on the hero with the plant on the top left corner to add a bit more depth to the experience.

In the attachment you can see the actual timing of the animation. This GIF was speeded up for demonstration purposes.

Props to the whole @Aerolab team for all the awesomeness put into this project.

Check out the video in real time →
Visit the site →

xapo_debitcard_realpixels.mp4
3 MB
Download

More by Aerolab

View profile