Zipper
A read more you unzip.
Affiliate link
03
Zipper
·
Interactive
·
Free
A “read more” you unzip. Drag the pull and the teeth part one by one, the fabric opens in a soft V and the text underneath shows through. Pull it all the way and the two halves come apart like a jacket, revealing everything; click to zip it back up.
Put your own label, title and paragraphs underneath, or any layer you like. Choose a dark or light theme or let it follow the visitor, and let it open by hand, when it comes into view, or as the page scrolls past a section.
Properties
Label, Title, Text
The text under the zipper. An empty line starts a new paragraph.
How I work
Custom content
Any layer to show instead of the text.
None
Theme
Dark, Light, or Auto to follow the visitor’s setting.
Dark
Dark / Light colors
Fabric, tape, metal, lining, text, muted text and shadow for each theme.
Graphite / Light
Font
Family and weight for the text. Sizes scale with the zipper.
Geist Regular
Radius
Corner rounding of the panel.
18 px
Opens
By hand, On appear (with a delay) or On scroll (follows the zipper or a section ID).
By hand
Start
Closed or open when the page loads.
Closed
On canvas
What it shows while you edit: Closed, Half or Open.
Half
Sound
Teeth ticking as you pull and a clack when it comes apart.
On
Haptics
A short buzz on phones that support it.
On
On open / On close
Run an interaction when it opens fully or closes.
None