• Sshhh
  • Components
  • Dialog
Free Cloneable

Sshhh? What is it? Who is it for?

"Sshhh" is a creative component library prioritizing smooth animations and accessibility. Built primarily with custom CSS, JavaScript, and GSAP code, it avoids using Webflow Animations, as they currently lack accessibility compliance.

This Components isn’t just for Webflow users; it’s also compatible for projects built solely with HTML, CSS, and JavaScript.

When I first started learning HTML, CSS, and JavaScript, I relied on countless tutorials and modules from various sites. They provided a great starting point, but as a beginner, it was challenging to go beyond that. Many modules lacked accessibility, so I often had to add this feature myself. Sometimes, modules worked only in Chrome, not in Safari or Firefox. Other times, adding animations was difficult because modules were built with only display: block and display: none.

Back then, I wished I could explore complete, accessible projects with open code. I wanted to see how others solved cross-browser issues in Safari, how to animate elements beyond the limitations of display: block and display: none, and how to approach accessibility challenges. Most tutorials showed how to create impressive GSAP animations but rarely covered how to make them accessible — something that requires extra effort.

This creative component library aims to fill that gap. I use these components 1:1 directly in my projects, customizing them to look and animate uniquely.

What Components can i expect?

The library will include a variety of components, from scrolling animations to hover effects, as well as essential modules commonly found on most websites, such as accordions, modals, buttons, dropdowns, menus, and more.

When will new Components be released?

New components will be added periodically. For updates, follow me on x.com, LinkedIn or Webflow.

How can i use these Components?

The code is entirely open-source, with extensive comments in the CSS and JavaScript to guide you. However, these aren’t simple copy-and-paste components — you’ll need to adapt and integrate them in your own way.

In the future, I’ll release detailed documentation for each component, with step-by-step code explanations.

Accessible Dialog/Modal

SSHHH · Components

The native HTML <dialog> element makes it easy to create an accessible modal. It automatically manages keyboard navigation and sets focus, eliminating the need for aria-modal adjustments. Plus, you can animate it with CSS or enhance it with JavaScript.

Try it with your Keyboard or Mouse.

Modal with CSS

JavaScript will be used to open and close the modal using the HTMLDialogElement API. You can find the CSS & JavaScript after the body, where you'll discover some CSS properties to adjust styles and animations.

There are also some CSS Properties to adjust some Basic Animations:

--dialog-animation-speed

--backdrop-speed

--backdrop-ease

--modal-speed

--modal-ease

--close-button-speed

--close-button-ease

--content-speed

--content-ease

--content-stagger

The JavaScript will also check for the presence of a scrollbar and apply padding to the html element to prevent the page from jumping when the modal opens or closes.

This text fade-in animation is implemented in CSS and utilizes an inline style to set an index property on each element you want to animate. This allows for a calculated delay. Unfortunately, you can only use inline styles on custom elements, not on standard Webflow elements.

00001@lummi.ai
A futuristic retro Illustration of a colorful restaurant.

Modal with CSS & JS

JavaScript will be used to open and close the modal using the HTMLDialogElement API. There is also a drawer implemented with JS. You can find the CSS & JavaScript after the body, where you'll discover some CSS properties to adjust styles and animations.

There are also some CSS Properties to adjust some Basic Animations:

--dialog-animation-speed

--backdrop-speed

--backdrop-ease

--modal-speed

--modal-ease

--close-button-speed

--close-button-ease

--content-speed

--content-ease

--content-stagger

The JavaScript will also check for the presence of a scrollbar and apply padding to the html element to prevent the page from jumping when the modal opens or closes.

This text fade-in animation is implemented in CSS and utilizes an inline style to set an index property on each element you want to animate. This allows for a calculated delay. Unfortunately, you can only use inline styles on custom elements, not on standard Webflow elements.

00001@lummi.ai
A futuristic retro Illustration of a colorful house interior.

What makes a dialog or modal element accessible?

When the modal is open, elements behind it should become inactive.

The focus should shift to an element within the modal upon opening.

When the modal closes, focus should return to the original activating element.

Focus should be trapped within the modal while it is open, preventing users from tabbing to elements outside the modal.

The modal should be closable by pressing the Escape key.

The modal should not be part of the tab order when it is closed.

It’s also important to respect user preferences. For users who prefer reduced motion, adjust animations accordingly. CSS provides a media query for this. Mozilla docs.

A modal should be opened with a <button>, not an <a>. The <button> element is intended for actions, while <a> is for links. Additionally, always set type="button" on a button. Without it, the default type is submit, which is only necessary within forms.

You can also use it as a Menu if it’s only an overlay.

Menu
Follow for more.