Zentry

The Motivation

Zentry's landing page is a masterpiece of web animation - scroll-driven reveals, cinematic transitions, and motion that tells a story. I wanted to understand how it was built, so I recreated it as a learning exercise.

What I Built

This Zentry clone is a faithful recreation of Zentry's award-winning older landing page, built to study advanced web animation techniques. The project focuses on animation fidelity and performance, replicating the motion-heavy, visually rich design with scroll-driven animations and cinematic transitions.

Technical Implementation

Animation Stack

• React - component architecture
• GSAP - animation engine with ScrollTrigger plugin
• TailwindCSS - styling

GSAP's ScrollTrigger handles the scroll-driven animations - elements that reveal, transform, and animate as you scroll. The challenge was matching Zentry's timing and easing curves, which required careful attention to animation parameters.

Performance Optimisation

Performance was a constant concern. With dozens of animations running simultaneously, I needed to optimise for smooth 60fps rendering:

• Used GPU-accelerated transforms (translate, scale, opacity) instead of layout-triggering properties
• Implemented intersection observers to pause off-screen animations

Visual Effects

The visual effects required creative problem-solving:

• Parallax layers
• Morphing shapes
• Text reveals

I studied Zentry's implementation through browser DevTools, reverse-engineering their techniques while adding my own optimisations.

Why I Built This

This was a frontend challenge project - no backend, no database, just pure animation work. The result is a portfolio piece that demonstrates advanced motion design capabilities.

Key Takeaway

Recreating expert work is one of the fastest ways to level up. By studying Zentry's animation decisions, I learned techniques I now apply to my own projects. The clone isn't just impressive - it's a teaching tool.