Client Work
Interactive Touchscreen Presentation for a Pharmaceutical Client
A multimedia touchscreen presentation developed for a pharmaceutical client exhibiting at an industry trade show.
The experience combined detailed visual content and pre-rendered animation in a single video, with a custom interactive menu allowing visitors to navigate freely between distinct sections.
Our Role: Front-end development and interactive video navigation.
Note: Client branding, imagery and content are withheld for confidentiality.
Key Features
- Multi-section presentation with detailed visual content
- Pre-rendered animations created in Adobe After Effects
- Interactive menu for navigating between sections
- Fade-in and fade-out transitions between sections
- Touchscreen interface designed for exhibition use
How It Works
The presentation brought together a series of information-rich sections, combining detailed graphics, text and animation into a cohesive visual experience.
Rather than recreating the animations using browser-based technologies, the presentation was produced in Adobe After Effects and exported as a single video.
An interactive menu allowed visitors to select the section they wanted to explore. JavaScript controlled video playback and seeking, linking each menu item to the relevant point in the presentation.
Each section incorporated fade-in and fade-out transitions, helping the experience move smoothly between topics while preserving the visual continuity of the original animation.
By combining pre-rendered animation with JavaScript-controlled navigation, the experience delivered a rich visual presentation while allowing visitors to explore its content at their own pace.
Why It Works
- Preserves the visual quality and complexity of pre-rendered animation
- Makes a detailed presentation easy to navigate through a clear menu
- Uses transitions to create a cohesive experience between sections
- Avoids the complexity of recreating intricate animations with HTML and CSS
Technical Summary
- Web-based touchscreen interface
- Adobe After Effects for animation and visual production
- Single video containing multiple presentation sections
- JavaScript video API for playback and navigation
- Interactive menu linked to video sections
- Fade-in and fade-out transitions between sections
More Technical Information
- The visual presentation was created in Adobe After Effects and exported as a single video file. This approach allowed complex compositions, detailed graphics and animation to be produced in a dedicated motion-design environment rather than recreated in the browser
- The front-end used JavaScript to control the video element, including playback and seeking to specific points in the timeline. An interactive menu provided access to the different sections, making the linear video function as a navigable presentation
- Fade-in and fade-out sequences at the boundaries of each section helped transitions feel deliberate and consistent. This approach combined the visual flexibility of pre-rendered video with the accessibility of a touch-driven interface