QuickSite Dev Log #4 — Interactions & Animations
How do you make a page react to the user — search, filter,
toggle — and do it smoothly? In this video I add the
client-side interaction system to the documentation/commands
page of quicksite-v2: a search input that filters the visible
cmd-cards as you type (with matchAttr to scope what counts as
a match, and emptyParent to hide abandoned section wrappers),
then plug the CSS animations editor into the same flow so
cards collapse out and fade back in smoothly instead of
snapping.
No fetch, no backend — pure DOM interaction wired through the
visual editor, plus a set-keyframe-animator workflow that
seeds about 10 reusable keyframe animations so we don't have
to hand-author opacity curves on camera.
GitHub: https://github.com/Sangiovanni/quicksite
Release notes: https://github.com/Sangiovanni/quicks...
CSS animations primer (linked in the video):
https://www.w3schools.com/css/css3_an...
Chapters:
0:00 Intro
0:21 Test page — three elements
1:46 First interactions — hide & show
3:00 Search input on documentation/commands
3:29 Wiring oninput → filter (cmd-card)
4:56 Advanced — matchAttr
6:21 Empty-parent — hide empty cmd-section
7:12 Hidden class
7:53 CSS animations editor tour
8:39 Workflow — set-keyframe-animator (10 presets)
9:26 hidden-cmd selector → collapse-out
10:25 Smooth disappearance demo
10:59 Going further — fade-in on re-appear
12:13 Outro
Full playlist: • Quicksite Beta
Previous: Dev Log #3 — Components vs Snippets ( • QuickSite Dev Log #3 — Components vs Snippets )
Next: Dev Log #5 Adding AI Connections (Local + BYOK) ( • QuickSite Dev Log #5 Adding AI Connections... )