🪗 Full-Height Funky Accordions 🪗
![site profile thumbnail](https://uploads-ssl.webflow.com/617c3c4b94f5961c66d65054/618eca6fd36551b48ab641db_blur-accordions-showcase.gif)
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/