I recently built a custom SVG page transition inspired by the attention to detail found in many A...I recently built a custom SVG page transition inspired by the attention to detail found in many A...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Sohrab's avatar
Sohrab Khan
• Jul 29
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.
WebflowGSAPBarba.jsFrontend DevelopmentMotion DesignWeb Development
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started