🪗 Full-Height Funky Accordions 🪗

site profile thumbnail


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/