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
The best way to grow as a developer is to study, experiment, and understand how things work under the hood.
I explored pixel-based page transitions and rebuilt the interaction from scratch using HTML, CSS, GSAP, and Barba.js. The goal was to create a more immersive navigation experience by turning a simple page change into a visual moment.
Using GSAP timelines and custom animations, I experimented with sequencing, timing, and pixel reveals to create a smooth transition between pages. Barba.js handled the page lifecycle, while GSAP brought the motion and control needed for a more cinematic feel.
A small experiment in creative development, exploring how thoughtful animations can make digital experiences feel more alive.
Would love to hear your thoughts on the final result.
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
Related posts
A scroll through a section on a recently launched site.
The SVG wheel behind the CTA rotates based on scroll direction, and there's a bit of parallax on the image to give the section some depth.
Scroll-based SVG rotation paired with parallax is such a small detail but it makes the whole section feel alive instead of static. Was GSAP ScrollTrigger doing the heavy lifting there, or a native Webflow interaction?
Another quick tip video on how to make your UI cards more engaging with animations in Webflow. Have an amazing weekend all!
Card hover animations are so easy to overdo, but yours look restrained enough to still feel premium. What's your rule of thumb for how much motion is too much on a UI card?
Been working on this one a while. Multiple background videos, visitors switch between them, UI adapts to whatever's playing.
@Eneko Lekue Desined seems amazing....which animation packages have you used?
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?