SVG Card Stack Transition with Sticky Scroll AlignmentSVG Card Stack Transition with Sticky Scroll Alignment
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Adriano's avatar
Ancorpoint Studioβ„’ logo
max
β€’ 1h
This card stack transition combining the SVG of each card to the sticky position is giving my brain really satisfying scratches πŸ˜˜πŸ‘Œ
-- I've been doing a lot more Framer developments lately where I don't do the design, I think one of the big advantages of having a strong background in design is that I can see the designers vision to translate it into the web obsessing over the details. I.e. see Figma design screenshot in the comments how each card had the same SVG but in irregular placements, I saw it as an opportunity to perfectly align them on scroll and add a bit of a transparency reveal at the end. It feels way more intentional and ties everything together. Design by @Iverson developed by me
Adriano's avatar
Ancorpoint Studioβ„’ logo
max
β€’ 1h
Figma design handoff
Post image
Renzo's avatar
pro
β€’ 38m
Really nice work and the final website looks powerful!
TRUEFRAME logo
max
β€’ 18m
aligning those SVG cards on scroll is such a small detail but it changes the whole feel. the transparency reveal at the end sells it
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started