🪗 Full-Height Funky Accordions 🪗

My first cloneable in almost a year! Created in response to a Facebook post that seemed like a worthy challenge 💪
It was super tough to achieve, using a combination of dropdowns, position sticky, CSS Grid & some mix-blend-mode magic to power the colorful overlays. Mostly no-code, with just of 2 bits of JS: one to achieve the jump links (Webflow doesn't play nice with links inside dropdowns) and another set to reset scroll position when closing the accordions.
A few tips:
• Doesn't work well in Safari
• Need to add more jump links? You'll need to add more lines of JS in the page settings.
• Additionally, jump links are linked to position: absolute elements within each dropdown, so you'll need to add new ones with new IDs to make it work
Enjoy, and let me know what you think!
Design:
dribbble.com/shots/12209806-Blurr-Animation
Facebook post: facebook.com/100005276292047/videos/287781939881694/
Similar sites

242
1.6k

62
468

327
5.3k

15
37

119
202

65
179