Making Websites Better
* Please note that the use of assets from the shown content has explicit permission from the making websites better director. My work on this is on the development of this website.
This project involved rebuilding an existing design inside WordPress with a focus on performance, interaction quality, and animation-led storytelling. The site was developed using Timber/Twig, ACF, GSAP, and a balance of vanilla JavaScript and AlpineJS to keep it both fast and flexible. The build centres on motion and micro-interactions, turning static sections into moving sequences that guide attention and frame the brand’s narrative.
This project involved rebuilding an existing design inside WordPress with a focus on performance, interaction quality, and animation-led storytelling. The site was developed using Timber/Twig, ACF, GSAP, and a balance of vanilla JavaScript and AlpineJS to keep it both fast and flexible. The build centres on motion and micro-interactions, turning static sections into moving sequences that guide attention and frame the brand’s narrative.
JavaScript Idle
WordPress Idle
Tailwind Idle
PHP Idle
CSS / SCSS Idle
TwigLang Idle
Webpack Idle
GSAP Idle
AlpineJS Idle
GitHub Idle
LocalWP Idle
Gravity Forms Idle
Approach
The aim was to create a site that feels alive without becoming heavy or intrusive. GSAP drives most of the movement across the site, using scroll-based transitions to more experimental motion sequences that introduce the brand’s message one moment at a time. Every animation was designed to serve the content, not distract from it.
Interactivity
The entire experience is shaped around lightweight but highly controlled interaction layers. AlpineJS handles dynamic behaviour with toggles and playback controls to conditional states, without introducing unnecessary dependencies. Gravity Forms was integrated for the contact areas, styled and animated to match the rest of the system.
GSAP Animations
Animation is the defining feature of this build.
The homepage contains a large moving element that tracks across the screen, zooming into individual points of the logo to discuss their meaning. Another timed animation moves a circular indicator through different content areas, connecting ideas visually as it travels from point to point. These are supported by multiple micro-interactions, hover sequences, and subtle transitions that lift the interface and keep users engaged.
The site includes advanced scroll-triggered hover effects that cause portfolio items to pop out as the user moves down the page. Key elements transform the cursor, switching from an arrow to a pointer on hover, with some interactions leaving behind trailing elements that echo movement.
The homepage contains a large moving element that tracks across the screen, zooming into individual points of the logo to discuss their meaning. Another timed animation moves a circular indicator through different content areas, connecting ideas visually as it travels from point to point. These are supported by multiple micro-interactions, hover sequences, and subtle transitions that lift the interface and keep users engaged.
The site includes advanced scroll-triggered hover effects that cause portfolio items to pop out as the user moves down the page. Key elements transform the cursor, switching from an arrow to a pointer on hover, with some interactions leaving behind trailing elements that echo movement.
Rotator Animation 
Website Introduction Website Development
Despite the level of animation, the site remains fast, fully responsive, and optimised for mobile. The layout adapts cleanly across breakpoints, and videos and animation segments were compressed, preloaded, and timed to avoid jitter or blocking. GSAP timelines were scoped to ensure that motion remains smooth even on lower-powered devices.
