πŸͺ— Full-Height Funky Accordions πŸͺ—

site profile thumbnail

Description

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/
dropdownaccordionblurblendcolorfuljoshworkcloneable

Related Made in Webflow Projects