9 months ago

https://twitter.com/sam_apostel Monday 31st of July 202331st of July 2023 Picture this: a bunch of developers, most of them back-enders, are given a Figma design file to turn into the https://www.flareapp.io.

.cardstack > article { will-change: transform, opacity; transform: translateY(calc(var(--index) * -1 * var(--card-offset))) scale(calc(1 - var(--index) * var(--scale-factor))); opacity: calc(1 - var(--index) * var(--opacity-factor)); transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }

Alternatively, you can write it out by hand: .cardstack > article:nth-child(1) { --index: 5 } /* backmost card */ .cardstack > article:nth-child(2) { --index: 4 } .cardstack > article:nth-child(3) { --index: 3 } .cardstack > article:nth-child(4) { --index: 2 } .cardstack > article:nth-child(5) { --index: 1 } .cardstack > article:nth-child(6) { --index: 0 } /* topmost card */ Rotate the stack

Track the scroll position https://www.framer.com/motion/ provides a useScroll hook that can track the vertical scroll progress of the screenshot in the viewport.