Little weekend prototype: iMessage style card stack. Always love a good reason to dive into Origami and work through visual + interactive puzzles like this. Here’s a bit about how I built it and a link to download ↓

The interactive layer and the visual layer are decoupled. There’s an invisible carousel of cards that you’re actually scrolling through. The visible stack of cards is entirely separate, animating independently based on scroll position.

In early versions, I focused on the transition from card 0 → 1. I could just “hard code” the transitioning values. This was an important step to figure out which properties to animate. You just couldn’t scroll past card 1 😅

When scrolling back from card 1 → 0, it just reversed the 0 → 1 animation. This made it feel like you’re grabbing a card behind the stack, pulling it to the front. What we really want is for it to feel like you’re always grabbing the front card and flicking it to either side.

So with all this, the real challenge was to figure out the dynamic logic needed to make this flexible and reusable. For this, I started to focus on the animations for card 2 instead of card 0.

All the logic is based on a progress value. When progress=0, card 0 is in the front; when progress=1, card 1 is in the front, etc. If we subtract the current progress from each card’s index, we get the distanceFromFront. We can use this to animate things like z-rotation.

Some things were more complicated. The toughest part was handling the animations of the front card and its 2 adjacent cards. As the distanceFromFront value goes from 1 to 0 to -1 to 0 to 1, we can perform a few functions to make it feel like you’re always grabbing the front card.

That’s pretty much it! Here it is with some photos from our recent trip to Japan. Satisfying to play with, super fun to build. If you wanna dive deeper, can download the file here:

Next, I’d like to replicate this in web with native CSS scroll snapping. It’d be amazing to also use CSS scroll-driven animations, but I’m not sure it would support this level of decoupling just yet (CC @bramus, @jh3yy 👀). Will play with a JavaScript solution for now..

I also wanna call out @RoberaGeleta and @daniel__designs for their takes on this interaction. Loved what Robera did with the y-rotation to fix the z-index jump.

made it so that you can drag in any direction. I’m sure this feels amazing, esp on a touchscreen. I pursued the decoupled carousel to figure out the logic needed for a native scroll gesture, e.g. trackpad swipe. We should compare notes!