Client Work
Interactive Sports Technology Touchscreens
Two interactive touchscreen experiences developed for a sports technology company at a major gaming industry event.
Built around two versions of the same interface, one focused on soccer and the other on the NFL, the applications combined animated transitions, video and interactive content to showcase different areas of the company's business.
Our Role: Front-end development and animation implementation.
Note: Client branding, imagery and content are withheld for confidentiality.
Key Features
- Two dedicated experiences for soccer and NFL audiences
- Animated home screen featuring a sports player
- Five interactive sections covering key business areas
- Animated transitions between the home screen and content
- Video content and interactive carousels
- Single-page application architecture
How It Works
The two applications shared the same underlying structure, with separate content focused on soccer and the NFL. Each was designed for a large-format portrait touchscreen, providing an interactive way for visitors to explore the company's products and services.
The experience opened with an animated sports player and five selectable sections, each representing a key area of the business, giving visitors a clear starting point for exploring the company's different capabilities.
Selecting a section triggered a coordinated animation sequence. The chosen content moved into the foreground as the animated player stepped back, creating a visual transition from the home screen into the selected topic without navigating to a separate page.
Each section presented an overview of its subject through a combination of video content, information cards and carousels. Visitors could explore the material directly on the touchscreen, moving between topics within a continuous, animated experience.
An animated interface transformed a collection of business topics into a cohesive, interactive experience, combining motion, video and touch-driven exploration.
Why It Works
- Uses animation to create a distinctive and memorable interface
- Organises complex business offerings into five clear topic areas
- Combines video and interactive content to communicate information in varied formats
- Maintains a consistent experience across two sports-focused applications
Technical Summary
- Web-based front-end built with HTML, CSS and JavaScript
- GSAP (GreenSock Animation Platform) for animation and sequencing
- Single-page application structure
- Coordinated animation timelines and interface transitions
- Video content and interactive carousels
- Designed for large-format portrait touchscreens
More Technical Information
- Both applications were developed using HTML, CSS and JavaScript, sharing a common single-page structure while presenting different content for soccer and NFL audiences
- GSAP was used extensively to coordinate the interface animations, including the transition from the animated home screen into each content section. Animation sequences controlled the movement of the selected content and the player character, creating a continuous transition without a full page change
- Each section incorporated video and carousel-based content to present an overview of the relevant business area. The result was a touch-driven interface combining structured information with animation and multimedia