About the project
RANK's main product is not vaults or yield protocol, it's actually a unique quant trading algorythm that allows traders get an edge in trading, without knowing how to code. Conventionally those tools and algorythms are tailor-made for traders. But before the RANK platform is fully opreational, the client wanted to start with the simplest part -- vaults.
Details
The animated portfolio and deposit components were probably the most interesting to work on. I wanted to create a friendly satisfying interaction, which turned out to be quite a challenge, since normal input boxes can't be animated. So I had to create a custom GSAP component with character by character animation:
// Animate changed digits
formatted.split('').forEach((newChar, idx) => {
const oldChar = prevFormatted[idx]
const digitEl = digitRefsRef.current.get(idx)
if (digitEl && newChar !== oldChar) {
gsap.fromTo(
digitEl,
{ y: -30, opacity: 0 },
{ y: 0, opacity: 1, duration: 0.35, ease: 'back.out(1.7)' },
)
}
})
The idea behind the key visual was to allude to RANK's logo.