Day 1 of 30 in my Webflow challenge Koffi I built this mini landing page with an element pop-in s...Day 1 of 30 in my Webflow challenge Koffi I built this mini landing page with an element pop-in s...
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
I built this mini landing page with an element pop-in sequence, image auto-bounce, and card move effects. The focus was frankly on animating the cards in a way that allowed it to be moved randomly at any point within the section easily, and on a clean layout.
Here is what went into it:
Created a pop-in load animation
Hover animations for all CTA buttons with neo-brutalism
Hero-image auto-bounce
Card component auto-animation with click-drag ability to any position on the section
Shake animation for Mobile devices targeting the card components
I am currently open to freelance projects, contract roles, and full-time positions (remote or hybrid). I build in Webflow, design in Figma, and I deliver fast without cutting corners.
If you're a business owner, startup founder, or innovator, and you need someone who treats your website projects as if their own business were on the line and delivers on business goals.
There’s something really appealing about an agency website that feels this comfortable having fun.
That comes through in both the design and the writing.
Today we want to share the results of the animation exploration for the Greeney website that I made yesterday.
Featuring smooth animations in each element to add to the beauty of a design.
The category default for AI products is dark backgrounds and gradient glow. Heron's audience is architects, so we built the visual system out of their working material instead.
Everything on the site is drawn as architectural line work. Plans, elevations, dimension strings, and annotation boxes styled like redline mark-ups, each one holding a genuine code reference rather than lorem text.
The system does two jobs. It reads as native to someone who spends their day inside Revit, and it supports the product story, because Heron works inside the drawing rather than beside it.