Framer Motion | 김미소의 포트폴리오

Motion Gallery

Thu, 09 Oct 2025 00:00:00 +0000

I wanted to see firsthand how much impact animation has on user experience, so I created a collection of interaction experiments using the Framer Motion library and TailwindCSS.

I explored various ways components could appear, disappear, or respond to mouse hover in ways that feel the most natural and enjoyable. By combining properties like whileHover and whileTap, I made the cards move rhythmically as if they were alive, and through variants, I experimented with smooth fade, slide, and scale transitions between components.

Through these experiments, I realized that animation is not merely a visual element but a powerful tool that guides user attention and enhances engagement with content. Styling quickly with TailwindCSS while adding dynamic elements using Framer Motion was an enjoyable learning experience in itself.

Modal Animation

Sat, 04 Oct 2025 00:00:00 +0000

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.

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.

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.