https://misosos.github.io/en/tags/animation/AnimationHugo Blox Builder (https://hugoblox.com)en-usThu, 09 Oct 2025 00:00:00 +0000https://misosos.github.io/media/sharing.pnghttps://misosos.github.io/en/tags/animation/https://misosos.github.io/en/playground/frontend-playground/motion-gallery/Thu, 09 Oct 2025 00:00:00 +0000https://misosos.github.io/en/playground/frontend-playground/motion-gallery/<p>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.</p> <p>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 <code>whileHover</code> and <code>whileTap</code>, I made the cards move rhythmically as if they were alive, and through <code>variants</code>, I experimented with smooth fade, slide, and scale transitions between components.</p> <p>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.</p>