This project was created to help sales teams better understand the day‑to‑day reality of an “AI Creator.” Rather than presenting technical specs or feature lists, the experience focuses on showing how AI‑powered professionals move through a demanding workday. The result is a playful, energetic piece that feels more like an interactive story than traditional instructional content.

One of the defining choices was the sideways‑scrolling format. Early in the project, I researched and built technical demos to validate that horizontal scrolling could work smoothly across devices without compromising usability. I owned the technical implementation from end to end, including scroll mechanics, animation systems, and responsive behavior, while collaborating closely with the designer to refine assets and interactions where needed.

The experience is powered by multiple GSAP ScrollTrigger timelines layered over a flexible CSS layout. Rather than relying solely on brittle absolute positioning, I structured the course using flex‑based sections with intentional spacing and layering to keep layouts resilient across screen sizes. Interactivity supports the narrative without overwhelming it, using state‑aware interactions and subtle visual feedback to guide users forward.

The course was localized into more than 20 languages, requiring careful handling of variable text length. Text containers scroll independently when needed, and soft hyphenation was selectively applied to prevent overflow. The final build became a reusable template for a second sideways‑scrolling course, reflecting my focus on code that balances creativity, scalability, and production readiness.

This project addressed three challenges common to interactive educational content built at scale: creating experiences that feel memorable, ensuring smooth and reliable behavior across devices and input types, and establishing a durable base template that could be reused by a broader development team. I built a single‑page clickthrough module designed to balance visual polish and interactivity with strict control over progression, navigation, and user state. The goal was not just to ship a compelling one‑off experience, but to define a stable, production‑ready format that reduced bugs, prevented broken user flows, and could be fine‑tuned and reused across future courses without sacrificing quality or consistency.

At the core of the module is a master GSAP timeline that sequences multiple content scenes and pauses at labelled boundaries. This is paired with a centralized page index that tracks page‑specific data such as ScrollTrigger timelines, scroll completion and interaction completion. Course progression is gated through three independent lock types (scroll, timeline, and interaction) rather than a single boolean, ensuring users can only advance once all required conditions are met, while remaining resilient to edge cases like rapid scrolling, repeated clicks and viewport resizing.

The module uses a modular structure for popup interactions and repeated animation patterns, allowing shared behavior without duplicating logic across pages. Popups are generated through factory functions that enforce a consistent lifecycle (open, disable scroll, animate, close, restore state), while still allowing optional customization per instance. Common motion patterns are similarly abstracted into helper functions that build and return GSAP tweens, keeping timelines readable, DRY, and easy to tune globally without refactoring individual scenes.

The module also supports localization and responsiveness, including layout‑aware animation adjustments. The result is a stable, production‑ready template designed not just to ship one course, but to be reused and maintained by a broader team with varying levels of technical depth.