Introduction
Wizard Perks needed a high-impact landing page that could showcase their AI-powered employee perks platform to enterprise clients like Google, LG, and ZYRA.
I partnered with The Working Assembly, a branding and design agency, to bring their vision to life. While The Working Assembly handled the branding and design, I led the entire development effort, building a custom two-page Webflow site from the ground up.
Wizard Perks provides AI-led discounts and freebies for company employees—including travel perks, exclusive deals, and their signature Wednesday giveaways. The design called for sophisticated scroll-driven animations and interactive elements that would communicate the platform's premium feel to enterprise decision-makers.
What sets this project apart is the extensive custom animation work required. I built multiple GSAP-powered sections including a pinned phone animation that transitions through four content states as users scroll, a horizontal scroll section for the merchants page, and a dramatic page load animation using clip-path reveals. The site also features scroll-triggered text animations using SplitType to fade in characters sequentially, creating an engaging reading experience.
For the card slider component, I implemented a responsive dual-system approach—a scroll-driven GSAP slider for desktop and tablet, and a touch-friendly Swiper.js implementation for mobile devices. This ensures optimal user experience across all breakpoints while maintaining visual consistency.
Project Goals & Challenges
Goal
Create a visually stunning, animation-rich landing page that positions Wizard Perks as a premium employee perks solution for enterprise clients.
The site needed to communicate value through sophisticated interactions while remaining performant and accessible across all devices.
Challenges
The design required complex scroll-driven animations that needed to work seamlessly across different viewport sizes. Multiple pinned sections with state-based content transitions, horizontal scrolling effects, and responsive sliders all needed to coordinate without conflicting. Implementing a dual slider system (GSAP for desktop, Swiper for mobile) added additional complexity to ensure consistent behavior at breakpoint transitions.
Key Deliverables & Results
Every scroll interaction reinforces the premium, innovative nature of their AI-powered perks solution.
The project faithfully brought The Working Assembly's design vision to life, creating an immersive experience that showcases Wizard Perks' platform to their enterprise audience.
Results
- 2-page custom Webflow site built from the ground up
- Pinned phone section with 4-state scroll-driven content transitions
- Horizontal scroll section using GSAP ScrollTrigger
- Clip-path page load animation with circular reveal effect
- Split text animations using SplitType for character-by-character fades
- Responsive dual slider system (GSAP desktop + Swiper.js mobile)
- CSS marquee component for infinite scrolling content
- Full responsive design optimized for all breakpoints
Like What You See?
Book your free no obligation website consultation to get started.
