From Design-First to Motion-Driven: Dylan Brouwer’s journey to the border without code | Codrops

From Design-First to Motion-Driven: Dylan Brouwer’s journey to the border without code | Codrops

Hi! I’m Dylan Brouwer, a Dutch digital designer and Webflow developer who works at the intersection of brand design, UX and motion. I help brands and creative teams create expressive websites that feel bold, intuitive, and built to stand out.

Although I usually work without code (Webflow is my playground), I’ve always been excited about the overlap between design and development. What really excites me is how today’s tools allow designers like me to bring interactive experiences to life without having to write everything from scratch.

A few years ago, I never would have imagined that I would be able to build the kind of expressive, animated, and interactive sites that I create today. Sure, I’m not your classic “technical developer,” but with Webflow, some front-end fundamentals, a little ChatGPT, and resources like Osmo Supply in my toolkit, I can get surprisingly far. And honestly, that feels pretty great.

It’s also a bit surreal (and quite funny) to appear in a Designer & Developer Spotlight. For a long time I didn’t even consider myself a developer. Codrops has been a huge inspiration to me throughout my journey, so it’s a real honor to share my work here.


Free GSAP 3 Express Course

Learn modern web animation with GSAP 3 with 34 hands-on video lessons and hands-on projects — perfect for all skill levels.

Check it out

Portfolio ©Design by Dylan

  • Type: Personal wallet
  • Technology: Webflow, GSAP (ScrollTrigger), Spline, Osmo Supply
  • Collaboration: Alexis Sejourne (creative developer)
  • Website: https://www.dylanbrouwer.design/

Your own portfolio is always the most difficult, right? You want it to impress fellow designers, that’s how you feel Youand still work for potential clients who just want to get an idea of ​​what you do. My new site is an attempt to balance those things: bold visuals, smooth interactions, and enough breathing room to make the UX feel calm and intuitive.

The most complex piece was the homepage hero: I wanted to show a looping showreel video in a rotating 3D display mockup, with both elements responding to scrolling. That turned out to be the case a lot of more difficult than expected.

I first generated a rotating mockup video with Midjourney and converted it into an image sequence animated with GSAP ScrollTrigger. Then, with the help of Alexis Sejourne, we created a clip path mask for the embedded video that matched the mockup’s screen and synced perfectly with the scroll animation. It was a technical puzzle to make that scroll sync feel smooth, but the end result really brings the page to life.

This project has taught me to design purposefully, not only to impress, but also to communicate. My previous portfolios leaned too much on the experience side, but this time I focused on clarity and flow, and designed something expressive, but not overwhelming.

Palmer tableware

  • Type: Product website / interactive experience
  • Studio: Made at UNCOMMON
  • Technology: Webflow, GSAP, Vanilla JS
  • Collaboration: Alexis Sejourne (creative developer)
  • Website: https://www.palmer-dinnerware.com/

At UNCOMMON, we reimagined the website for Palmer Dinnerware as a digital canvas rather than a traditional e-commerce catalog, a space where visitors could explore the entire collection in a tactile, immersive way. Instead of clicking through pages, users scroll or drag through a visual showcase that brings the craftsmanship of each piece to life.

The concept was simple but ambitious: to make the website feel like one experiencenot just any store. You can filter products directly on the canvas by color, shape, or size, or switch to a structured grid view. Delve deeper into a collection and you’ll be guided through a curated horizontal-scrolling lookbook designed to evoke mood and storytelling.

The biggest challenge was bringing this interactivity to life, especially seamlessly balancing scroll, drag and click interactions. Movement played a key role: GSAP’s Flip plugin gave us buttery smooth transitions and a sense of physicality that matched Palmer’s brand. On the technical side, Alexis Sejourne stepped in to unify the homepage experience, especially by synchronizing the dragging and scrolling with the real-time filtering of plates across the canvas. His expertise was crucial in making everything feel fluid and intuitive without sacrificing performance.

Building this with Webflow and custom JavaScript was a great exercise in pushing no-code to its limits while keeping performance and UX top of mind. It’s one of those rare projects where design, development and concept all clicked perfectly.

Dolsten & Co.

Dolsten & Co. is a new AI-first creative studio with a bold identity, and we wanted their website to feel just as alive and expressive. The standout feature? A continuous 3D flower animation that starts as a preloader and then transitions seamlessly into the homepage hero, subtly responding to scrolling for added depth and movement.

That animation was the main technical challenge. Working with Yan Paul Dubbelman, who created the stunning 3D flower, we used two videos with transparent backgrounds: one for the preloader and one for the idle animation. Using a GSAP timeline, we synced them perfectly so the transition felt seamless, while also layering in scroll-based rotation for added interactivity.

What makes this project special is not only the result, but also the speed: we went from design to development in just two weeks. It was a great reminder that with the right focus, team, and tools, you can bring a high-quality, interactive site to life, even on a tight timeline.

Mythical Codex

  • Type: Experimental website (Awwwards Masterclass Project)
  • Technology: Webflow, GSAP, WebGL
  • Accompanied by: Niccolò Miranda (Awwwards Masterclass)
  • Website: https://mythical-codex.webflow.io/

Mythical Codex was the result of a 10-week creative deep dive during Niccolò Miranda’s Awwwards Masterclass, a course that pushed my boundaries like no other project.

From choosing a story-driven theme, coming up with a unique visual direction, and designing an entire user interface, to implementing custom code, animations, and even a WebGL interaction, this project was a full-stack creative challenge. It was my first time touching WebGL, and that part alone was intense. The technical complexity was real, but it also opened a new door: learning to code alongside ChatGPT, debugging live problems, and approaching technical problems with curiosity instead of fear.

Besides the technology, the creative discipline that was required was what stuck with me most. Niccolò’s process has taught me how to think more conceptually, how to translate abstract ideas into tangible interactions and how to Why behind the design, even when things become complex.

This project really expanded my idea of ​​what is possible within Webflow combined with code, and it marked a shift in the way I approach storytelling through digital experiences.

Packing

After working in-house for almost 10 years (mainly in design roles), I finally made the leap to freelance full-time. I’ve been working as a freelancer for a few years now, but this year felt like the right time to go all the way.

Right now, my biggest challenge (and motivation) is shaping this next chapter: finding the right collaborations, further developing my skills and building a creative career on my own terms. I recently started working Future Three Studio about an exciting redesign for Aardvark Book Club (Canada), plus a super fun website for Pizza Amici, a pizza food truck company (Netherlands). And there is more in the pipeline. I’m full of energy and can’t wait to see what this year brings.

If you’d like to follow along, check out my work and updates at Instagram And Linkedin. Let’s go!


#DesignFirst #MotionDriven #Dylan #Brouwers #journey #border #code #Codrops

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *