Energizer - Web Development
- Custom website development using CSS
- Built scroll-triggered video playback
- Integrated complex front-end animations for smooth, responsive transitions
- Optimised the site for performance while handling heavy video/animation assets
For this project, the client provided us with the complete visual assets (including design and video content), and our role was to bring everything to life on the web. We developed the site with custom CSS and worked heavily on advanced front-end interactions. A key part of this was implementing scroll-controlled video scrubbing, where the playback is tied directly to the user’s scroll behaviour. This allowed visitors to move through the video timeline interactively — advancing when scrolling down, reversing when scrolling up — creating a seamless, Apple-style product reveal experience.
In addition to the video work, we animated a static illustration to demonstrate how energy flows from the battery into connected devices. This formed a central interactive element for showcasing Energizer’s home battery system. The project was delivered through a close collaboration between our front-end developer, back-end developer, motion designer, and project manager.
Please contact Shtudio directly for further project details.
