WebflowGSAPMigrationCMS Architecture

José Neves Foundation: a Webflow rebuild migrated from Gatsby and Contentful

250+
Pages migrated
27
CMS collections
<3s
Load times
4 months
Delivery time
0
Post-launch issues

A Webflow build with custom GSAP animations, advanced CMS filtering, and a full content migration from Gatsby and Contentful — delivered in 4 months.

The challenge

The José Neves Foundation is a Portuguese nonprofit focused on education and knowledge. They had a website built with Gatsby and Contentful — good technology, but the setup left the team dependent on developers for most content changes. Hard-coded elements couldn’t be edited. Contentful’s interface confused the editorial team. Updating a page that should take minutes took days.

They came to us with a Figma design and a clear brief: rebuild the site in Webflow, migrate all existing content, and recreate every animation from the old site. The animation part was the first challenge. The Gatsby build had scroll-triggered effects, staggered transitions, and interactive elements that went well beyond what most Webflow projects require. The second challenge was their content library — hundreds of articles organized by theme, type, and tags, with cross-filtering that needed to work in every combination.

The solution

We built the entire site in Webflow, implementing the client’s Figma design from scratch. No templates, no shortcuts.

The animation work was the most demanding part. The old site had grid lines that grew on scroll, an SVG menu that breaks apart on hover before opening a full-screen navigation with its own animation sequence, custom toggle interactions, video modals, and a homepage slider that became one of our favourite pieces. Most hover effects were done in CSS to keep performance tight. For anything that needed staggering or precise sequencing, we used GSAP — Webflow Interactions doesn’t support staggering, and we needed that level of control.

For the content library, we built a filtering system using Jetboost for search and filtering, combined with custom JavaScript for the cross-filtering logic. Selecting a theme still shows the available types. Selecting a type still shows the relevant themes. Getting that to work required careful CMS architecture — 27 collections in total, with multi-reference fields and reverse lookup collections to work around Webflow’s relational limitations.

Technical approach

The migration was a project in itself. Contentful’s schema API gave us structured access to 250+ articles, but the data wasn’t ready for Webflow’s CMS format. We used Parabola to clean, transform, and map the content before importing it. The result was a clean migration with no manual data entry.

The CMS architecture goes beyond a typical Webflow project. 27 collections handle everything from articles and library entries to homepage slider content — each slide is a CMS entry the team can update themselves. Multi-reference fields connect themes to articles, articles to types, types to tags. Where Webflow’s native references fell short, we created auxiliary collections for reverse lookups so the filtering system could query content from any direction.

The results

The foundation’s team updates content independently. Pages that used to take days to change now take minutes. The editorial workflow they wanted — everything in one place, no developer needed — is exactly what they got.

Every animation from the old Gatsby site was recreated. The site loads in under 3 seconds. And we delivered the whole thing in four months, including the content migration.

For more on why we moved away from traditional CMS platforms, read WordPress vs Webflow: why I switched after a decade.

Visit website

Key Results

01

Full content migration from Contentful

250+ articles extracted via Contentful's schema API, cleaned and transformed through Parabola, and imported into Webflow's CMS without data loss.

02

Complex animations recreated

Every scroll animation, staggered transition, and interactive element from the old Gatsby site was rebuilt using GSAP and Webflow Interactions.

03

Advanced filtering and search

Hundreds of library articles filterable by theme, type, and tags using Jetboost and custom JavaScript — with cross-filtering that keeps results consistent.

04

Editorial independence

The foundation's team manages all content, including the homepage slider, without developer support — something they couldn't do with Gatsby and Contentful.