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
Looking to add a premium, tactile feel to your website? ✨
I just finished building this smooth, drag-and-scroll horizontal gallery and wanted to share the preview with the community! It starts as a clean image stack and smoothly expands into an interactive carousel, making it perfect for creative portfolios or service showcases.
Instead of writing complex animation logic from scratch, this is fully coded and ready to go with HTML, CSS, and JS. You can easily plug it into your site and swap the images in minutes using Claude.
Check out the video below to see how it flows!
If you want to use this exact component for your next web project, you can download the complete code package here: Gallery-scroll-animation
The stack to carousel expand is a nice touch, most portfolio galleries just cut straight to a grid. Appreciate you open sourcing the code too.
great!!
The drag-and-scroll interaction feels especially well suited to a portfolio—letting the work reveal itself instead of forcing a grid. I also like that the carousel remains a lightweight, portable HTML/CSS/JS component.
Amazing work
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
Challenges
View all
Related posts
Creating immersive digital experiences with smooth website animations ✨
Designed & developed by Usman DevHub Tech & Creative Studio.
We create premium websites with modern UI, interactive animations, and unique visual experiences that help brands stand out. 🚀
Want a website like this for your brand?
DM us and let's discuss your project.
#WebDesign #WebDevelopment #WebsiteAnimation #UIDesign #CreativeStudio #DigitalAgency #UsmanDevHub
Love this, Usman! You drop something amazing every single time.
Back in 2016 I made a lot of cinemagraphs for HBO.
They took a surprising amount of work. Masking footage, finding the right loop, freezing parts of the frame and getting everything to transition cleanly.
I’ve had an idea for a simpler cinemagraph tool kicking around in my head ever since.
About a month ago I built another small tool using Toolcraft as the starting point, so yesterday I wanted to see if it could handle this idea too.
A few hours later I had a working cinemagraph editor.
Drop in a video → find your loop → choose how it loops → paint the areas you want to keep still → export.
Basically the workflow I used 10 years ago, condensed into a few controls.
Still rough around the edges, but kind of wild to finally build a tool I’ve been thinking about for a decade.
The masking-and-looping history is exactly why a simpler cinemagraph workflow feels valuable; the tricky part is preserving a seamless transition without making the tool feel like a timeline editor. Curious direction for an AI-assisted app.
One of the projects that shaped the type of work I enjoy building today.
Back in 2017, I had the opportunity to help develop this interactive editorial experience for CNN on the opening of the Louvre Abu Dhabi. That was my first project with CNN.
Rather than presenting the story as a traditional article, we used animation, scrolling, photography and video to guide readers through the architecture, engineering and vision behind the museum.
It's this blend of storytelling, design and development that made me realise how powerful the web can be when interaction becomes part of the narrative.
It's also the kind of work I still love creating today, whether for publishers, agencies or brands looking to tell a story in a more engaging way.
#CreativeDevelopment #InteractiveStorytelling #Scrollytelling #WebDevelopment #FrontEnd #GSAP #EditorialDesign #DigitalExperience #CreativeCoding #MotionDesign
this looks incredible.