I recently built a custom SVG page transition inspired by the attention to detail found in many Awwwards-winning websites.

Instead of relying on a simple fade or slide, I wanted the transition to feel like part of the experience. I designed a hand-drawn scribble animation that flows between pages, with the stroke color changing based on the destination. It gives each page its own personality while keeping the overall experience connected.

The interaction was built with GSAP, Barba.js, and custom SVG path animations. I spent a lot of time fine-tuning the timing, easing, and typography animations to make everything feel smooth, natural, and intentional.

This isn't a full website, just a small interaction experiment. It was a chance to explore creative page transitions, refine animation techniques, and push my front-end motion skills a little further.

I'd love to hear your thoughts or feedback.