As my first project at BASIC/DEPT®, I was resourced to complete the technology page for the Luminar website. Luminar provides lidar technology to cars, which helps with detecting objects on the road ahead whilst driving — a technology that comes standard with the new Volvo EX90, for example. This page was designed to show off each piece of this technology.
A 3D rendered video of the product and its tech was exported as thousands of images, which were then animated using GSAP Tween and ScrollTrigger. Scrolling up or down the page would load the corresponding image for the current scroll position.
Some key implementation notes:
The image loading mechanism preloads the next, and previous, 10 images for the current frame (image)
The images are rendered on a Canvas
In addition to loading new images as you scroll up or down, certain frames have overlays with additional information
Some of these frames also fade seamlessly into a video overlay