https://misosos.github.io/en/tags/modal/ModalHugo Blox Builder (https://hugoblox.com)en-usSat, 04 Oct 2025 00:00:00 +0000https://misosos.github.io/media/sharing.pnghttps://misosos.github.io/en/tags/modal/https://misosos.github.io/en/playground/ui-components/modal-animation/Sat, 04 Oct 2025 00:00:00 +0000https://misosos.github.io/en/playground/ui-components/modal-animation/<p>I realized that when modal windows on websites appear or disappear too abruptly, they can disrupt the user experience. So I experimented with Framer Motion to see how to make them appear smoother and more natural.</p> <p>First, I explored how Framer Motion’s AnimatePresence component works in order to implement the exit animation for the modal. Based on that, I combined two effects for the best result: a fading background (Fade) and a slightly enlarging window (Scale) when the modal appears.</p> <p>Beyond animation, I also added usability improvements such as allowing the modal to close when pressing the ESC key or clicking outside the darkened background area. Through this experiment, I was reminded that animation is not merely decorative but an essential UX tool that helps guide interaction flow without interrupting user behavior.</p>