Levora site development – FWA of the Day
Such an unusual and complex project required really high development skills, but also a lot of effort from designers and illustrators.
The first step was the creation of all the graphics in static. Next, it was necessary to combine everything into a single scene. Then, we transferred the scene to a real website by linking it all to a horizontal scroll.
We used Blender to export the scenes as GLB/GLTF. The camera movement across the scene was set in Blender and exported as an ActionClip (AnimationAction).
The resulting scene was launched on the website using the Three.js (powerful WebGL library). The scroll is tied to the AnimationAction using the GSAP ScrollTrigger. Thus, we got a working scene, virtually tied to the scroll. Further work required debugging, fine-tuning of all timings, and the creation of other small animations.
The core of the project was created using our standard technology stack: the Bona framework, the GSAP animation platform, and the SmoothScroll library.
To create micro-animations in scenes (like a waterfall effect, an egg explosion, or a dynamic starry sky), we used many different techniques, such as shaders, sequencing, particles, etc.
In addition, it is worth noting the optimization. Initially, the entire site weight was about 80 Mb. A large number of graphics optimizations and its conversion to the modern WEBP format let us reduce the weight of the main page up to 9 Mb. CDN helped us to optimize the delivery of resources to the end user and made the site load even faster.