Building animated marketing sites with Nuxt and Storyblok

— Martin Risseeuw, freelance Nuxt/Vue developer, Haarlem NL

After building marketing sites for Secrid, THE EMBASSIES and Tommy Hilfiger, this is the stack I keep coming back to: Nuxt for rendering, Storyblok as the headless CMS, and GSAP for animation. Here is why the combination works and how I structure these projects.

Why Nuxt and Storyblok?

Marketing sites need two things that often pull in opposite directions: editors want to change content without a developer, and visitors expect fast, polished pages with rich animation. Nuxt's static generation gives you the performance for free, and Storyblok's block-based content model means every page is assembled from components the editor can rearrange.

How I structure the blocks

Each Storyblok component maps 1:1 to a Vue component. Pages are just a list of blocks, so a hero, a USP list or a project slider can be dropped onto any page. The visual editor previews the real site, which keeps editors confident and support requests low.

Where GSAP fits in

Animation is layered on top with GSAP and Lenis smooth scrolling: page transition curtains, scroll-triggered reveals and image sequences. The trick is keeping animation in the Vue layer, never in the content model, so editors can't break it.

app/storyblok/Page.vue
// Every Storyblok block renders through one dynamic component
<StoryblokComponent
  v-for="blok in blok.body"
  :key="blok._uid"
  :blok="blok"
/>

Is this stack right for your project?

If you need a marketing site where content changes weekly and the design has to feel premium, this combination is hard to beat. I'm available for freelance Nuxt and Vue projects from Haarlem, the Netherlands — get in touch via the contact section.