We are kicking off our Developer Spotlight series by featuring the brilliant Lorenzo, a web developer whose creative projects and technical expertise inspire us all. This series is our way of shining a light on developers who push boundaries and bring fresh ideas to the web development community.
Hey Codrops community, I’m Lorenzo Dossi, a motion designer and front-end developer based in Bristol, UK, currently working with the talented team at Lusion.
Last year I’ve been working on some projects I haven’t shared yet, that’s why I’m excited to reveal some behind-the-scenes details.
This is my latest personal project. I hadn’t shared it publicly yet, but this seems like the perfect virtual stage to do so. It’s a portfolio site for a super talented former colleague, with whom I shared a desk for three years at Basilico, one of the best web agencies in Italy.
A common criticism of sites published on Awwwards is that they tend to be slow, filled with unnecessary animations, and have overly complex UX. This site represents an attempt to demonstrate that it is possible not to give up on animations, without letting them distract from the content.
Since the design is quite minimal, I spent a lot of time thinking about the right motion design language for this project. In the end, I concluded that the common thread should be a soft yet confident series of vertical movements. Even without page transitions, this approach helps tie the various pages together:
Homepage navigation
The logic is that each project has a certain number of images or videos on the homepage. On hover, only the images belonging to that project remain in focus, while everything unrelated goes out of focus:
Frictionless case-study transitions
Effortless navigation is key to a great UX: when you open a detail page, you scroll through images and videos, and once you reach the end, you seamlessly move on to the next case study—loading subsequent pages automatically, with zero friction:
DMS (Design Management System)
Not only the content but also the site’s design is fully configurable through the CMS (Content Management System), from how images are laid out on the homepage to how much parallax is added to the case study images:
Scrollbar makes the content dance (in a bad way)
The home page has no scrollbar, while other pages do—leading to a horizontal shift in the layout whenever you navigated between them.
I fixed this issue so anyone browsing with a scrollbar won’t notice that little jump anymore:
Mobile navigation
On mobile, the site is very straightforward:
Wowtapes was my first major project, made with the incredibly talented Margherita Fortuna for a leading video production studio based in Rome. It’s now been online for a full year, and looking back at it still makes me extremely proud with the result since I also had full control of the motion system.
While on luisaruzzenenti.com the motion was minimal and unidirectional—always rising from the bottom as though running on tracks—here, the diagonal page transition sets the tone: bold like the font and fluid like many of the video transitions in wowtapes’ works.
Highlighted feature
One of my favorite features of this site came to life as a solution to a problem caused by page transitions. Although the page transition effect is visually appealing, it can feel quite heavy. To reduce friction when browsing the portfolio, I needed to find a way to prevent users from being forced to experience the page transition every time they navigate back and forth between the “works” page and a project detail page.
The solution I came up with was using an overlay for each project. However, this introduced a new challenge: since the project was now displayed only through an overlay, I still needed to find a way to make the page exist independently, allowing the project page link to be shared independently.
To address this, I implemented a feature where the URL changes dynamically when the overlay opens. This way, if the link is shared, or even if you simply refresh the page while the overlay is open, it loads the project as a standalone page.
Nildo is my very first freelance project, and I’m very attached to it.
It was created around 2022 with Margherita Fortuna, this was the first project I worked on with her. We didn’t know each other at the time, but she still trusted me and gave me the opportunity to prove that I could complete a full stack project from start to finish.
I’m also particularly fond of this project because at the time (I was 21) I felt for the first time that I could compete with the big players, winning my first personal award: an FWA.
Highlighted feature
One little challenge, especially since I was new to backend mechanisms at the time, was handling the data entry and the page links for multiple languages. In fact, the website supports data entry in both Italian and English, which means that each link is available in both languages—along with all the related metadata.
My approach to work
The two main ingredients for the sites I build are motion and design. My focus is on movement—movement justifies the design, reinforces design choices, and, if done well, helps guide the user’s attention.
When I start a new project, I never follow a strict step-by-step approach. Instead, I tackle it from different angles: text reveals, hover animations, page transitions, and so on. As soon as one of these elements resonates with the mood of the design, I adapt all the other elements accordingly.
What’s next?
My goal now is to improve my skills with the WebGL API, and I believe Lusion is the perfect place to achieve that. In the meantime, I don’t want to stop experimenting with other tools: Blender, Houdini, and After Effects are at the top of my list.
Final Thoughts
I’ve been a huge reader of this site for years, using it to explore and study new techniques, so I’m truly honored to have had the chance to share some of my work here.
If you want to connect feel free to write me on X @lorenzodossi
Thanks so much to the Codrops team and the entire community!