The Thrive in Abu Dhabi hub is a CNN-sponsored content experience that showcases live, work, and lifestyle stories from Abu Dhabi. We built it with Astro.js for the front end, a custom React-based CMS that authors components as JSON, and GSAP for scroll- and interaction-driven animations—with component behaviour and animation triggers controlled via class names in the code.
Why Astro for the Front End
Astro gives us mostly static HTML by default: components ship zero JavaScript unless we opt in with a client directive. For a content-heavy, editorial site like Thrive in Abu Dhabi, that meant fast loads and great Core Web Vitals. We use Astro for layout, routing, and composing the page; interactive islands (React or Vue) and GSAP run only where we need them—heroes, scroll reveals, filters, and galleries.
Custom React CMS: Components as JSON
Rather than locking editors into a fixed set of blocks, we built a custom CMS in React that lets content authors assemble the experience from a library of components. Each component is defined once in code (in Astro/React) and represented in the CMS as a structured block—heading, copy, media, CTA, filter grid, etc. The CMS outputs the page as JSON: an ordered list of component types and their props.
Astro then reads that JSON at build time (or at request time if we add a dynamic route) and renders the matching component for each block. New component types are added in code and then exposed in the CMS, so the system stays flexible without turning into a free-form page builder. The result is a clear separation: content and structure live in JSON; presentation and behaviour live in the codebase.
GSAP Animations and Class-Name Control
We use GSAP for scroll-triggered reveals, parallax, and staggered entrances. To keep animation logic maintainable and predictable, we drive behaviour from class names in the markup. For example, a section might have a class such as `animate-on-scroll` or `parallax-slow`; a small GSAP setup script scans for these classes and applies the right timeline (e.g. fade up, scale, or parallax). Editors don’t touch the code—they pick from predefined component variants that already carry the right classes.
That approach gives us: (1) a single place to tune animation behaviour in code, (2) consistent motion across the site, and (3) the ability to A/B test or swap animation strategies by changing the class-to-timeline mapping. We use GSAP ScrollTrigger for scroll-linked animations and keep the main thread light by animating only transform and opacity where possible.
What We Delivered
- Astro-driven static site – Fast, SEO-friendly pages with minimal client JS.
- Custom React CMS – Authors build pages from components; output is JSON consumed by Astro.
- GSAP animations – Scroll and interaction-driven motion, triggered and configured via class names.
- Class-name–driven behaviour – Components declare intent (e.g. `animate-on-scroll`, `stagger-children`); one script applies the right GSAP timelines.
- Editorial flexibility – New component types and animation presets can be added in code and exposed in the CMS without rebuilding the whole system.
Outcome
Thrive in Abu Dhabi delivers a polished, performant editorial experience that fits CNN’s sponsor-content standards. Astro keeps the front end fast; the custom CMS keeps content structured and manageable; and GSAP plus class-name control keeps animations consistent and easy to evolve. If you’re planning a content hub or sponsored experience with similar needs, we’d be happy to discuss how this stack could work for you.
Want to explore Astro, a component-as-JSON CMS, or GSAP-driven animations for your next project? Get in touch to see how we can apply this approach to your brand or editorial product.