Skip to main content
CREATIVE FRONT-END & MOTION DESIGN

CRAFTING A STELLAR DIGITAL JOURNEY FOR PIZZA PLANET

Scroll-Cinema Motion Ecosystem

07
Engineering notes
5
Core technologies
4
Documented screens
spiffy-griffin-a8fbe3.netlify.app
Watch on LinkedIn
01 — Overview

The problem worth engineering

This project represents a deep dive into high-end motion design and advanced front-end orchestration. The goal was to build a digital experience that feels as hand-crafted as the pizza itself, utilizing GSAP's most powerful features to manage complex state transitions.

Every section is a canvas where mathematics meets art—from the precisely calculated width of the scrolling columns based on a 24-column grid system to the responsive wipes that adapt based on the user's viewport. I engineered a multi-phase animation pipeline that ensures the browser remains performant even when handling dozens of simultaneous SVG transformations and Lottie animations.

The architecture leverages Next.js for server-side stability while pushing the boundaries of the browser's rendering engine with frame-perfect 'will-change' optimizations and custom Bezier easing functions.

  • Dual-layer split hero with horizontal scroll-driven workflows on a 24-column geometric grid.
  • Multi-phase GSAP pipeline coordinating dozens of SVG transforms and Lottie sequences.
  • Viewport-aware wipe architecture with custom Bezier easing and will-change budgeting.
02 — Deep-Dive Modules

How it was built, system by system

01 / 07
Engineered a 'Dual-Layer Hero Architecture' with synchronous animation
Core Engine & Business LogicModule 01

Engineered a 'Dual-Layer Hero Architecture' with synchronous animation

The system splits the viewport into a 'Cream' and 'Dark' layer. I calculated a 1.2s delay for the SplitText reveal (yPercent: 120, rotationZ: 10) followed by a clip-path wipe from (0% 0% 0% 100%) to (0% 0% 0% 0%), while simultaneously shrinking the container width to exactly 69vw to create a high-end editorial feel.

Core Engine & Business Logic1
Interface, Motion & Accessibility6

Related Projects

Explore more of my work

smoke
logo

"If Your Dreams do not scare you, they are too small !"

Got a project? Let’s vibe together and
make it ninjaa-precise—get in touch!

Call Me Now !

mail

noordragon2004@gmail.com

address

from egypt,mansoura

phone

+20 1145838187