Back to posts
  • Video
  • CSS
  • Design & Feedback
  • Web Dev

New Dinghy Website part 7 – Fancy Links in Headlines

Nils Borgböhmer
Nils Borgböhmer

Video Summary

Hey everyone, Nils here from Dinghy Studio. Welcome back to our series on rebuilding our agency's website. In today’s episode, I’m excited to share a bit of a UI animation challenge we faced and how we managed it with SvelteKit and Sanity.

Our designers presented us with a design that required a unique animation effect. We've had a similar feature on our current website, but with the move from Next.js to SvelteKit and a slight design evolution, we needed to rebuild this from scratch.

The challenge was two-fold: creating a visually appealing animation and ensuring it could be managed easily in Sanity, our CMS. We started by addressing how to manage this content in Sanity. The design called for a regular headline with three links, each accompanied by an image. To achieve this, we created a 'fancy link component' in Sanity, which surprisingly wasn't too complicated.

In our Sanity schema, we added a new object called 'stage' with three fields: headline, subheadline, and button. The headline was defined as an array to allow for rich text editing. We used Sanity’s block content (portable text) feature, which is structured content. I added a new annotation for our fancy link, requiring fields for an image, a URL, and an image title for accessibility.

In the Sanity studio, this translates into a simple editing experience. Content authors can upload an image, add a URL, and a title right within the text editor. It's as seamless as adding a regular link.

Now, onto the frontend implementation in SvelteKit. We used a portable text component to handle the structured text from Sanity. I created a 'Fancy Hover Headline' component to manage the animation. This component takes care of extracting data from the headline and rendering it appropriately.

On the frontend, the headline looks fantastic. When you hover over a link, a gradient underline appears, and the associated image follows the mouse cursor. This even works on mobile, where a tap first reveals the image, and a second tap follows the link.

The magic here is in the mouse movement tracking and CSS calculations to ensure a smooth animation. The best part is that all this intricate frontend work doesn’t affect our content team. They can change text or swap images in Sanity, and the frontend updates automatically, handling edge cases like image positioning relative to the cursor and browser edges.

I love how Sanity allows us to separate presentation from content authoring. It’s a powerful way to maintain a dynamic and visually engaging website without complicating the content management process.

Author

Nils Borgböhmer
Nils Borgböhmer

Co-Founder, Head of Interaction Design

Connect on LinkedIn

Similar articles

  • Preview of Youtube video

    New Dinghy Website part 8 – Circular Floating Images

    In this episode we put together a nice, circular layout using Sanity's structured content approach and CSS's new trigonometric functions 🙌. The whole experience turned to be very nice because it's still very easy to update images in that content element without having to touch the mechanics of the animation 👍.

    • CSS
    • Design & Feedback
    • Web Dev
    • Video
  • Preview of Youtube video

    New Dinghy site part 6 – Get in touch!

    In this video we're working on our contact page. In this process we'll look a tiny bit more into structured content with Sanity, a lot more into CSS layout techniques and mostly into how we can create contacts right in our Hubspot account via their official API. We're doing that because we'd like to be in control of every design aspect of the form and Hubspot only let's people with very deep pockets do that the regular way :D

    • Web Dev
    • Design & Feedback
    • Video