✳flâneur — a map of the web's best reading
Transitions.dev — Essential transitions for web apps
transitions.dev · 949 words · saved by 3 readers
Collection of the most essential transitions for web apps that you can just copy and paste into any project.
blocks below. ──────────────────────────────────────────────────────────── */ .card[data-proto-card][data-wip="true"] { display: none !important; } /* Desktop reuses the P7 "Modal open / close" prototype transition: open → scale(--p7-scale) → scale(1) over --p7-open-dur close → scale(1) → scale(--p7-scale-close) over --p7-close-dur Mobile (≤639px) re-skins the dialog as a bottom-anchored sheet with panel-reveal style fade + cross-blur and explicit Y travel: open → translateY(300px) -> rest close → rest -> translateY(200px) See the @media block below. */ .proto-modal-root { position: fixed; ins
Explore this link on the map →saved by
related reading
- 60fps - UI/UX animation inspiration for mobile & web apps60fps.design
- Chloe's Gardenchloeyan.me
- performative-ui | AI-native React Componentsvorpus.github.io
- Web Interface Guidelinesvercel.com
- ScreensDesign: App Design Library & UI Inspiration | iOS Examplesdesignvault.io
- Say precisely what you mean.index.how
- Transitionsanimations.dev
- glimm — shader-driven page transitionsglimm.dev
- Liquid metal — Animated metal shader effectmetal.jakubantalik.com
- Mediumuxdesign.cc
- Impeccable: The missing upgrade to Anthropic's impeccable skillimpeccable.style
- Geistvercel.com