3D scrollytelling websites are a brilliant way to achieve maximum immersivity in presentation without sacrificing a tiny bit of accessibility and performance.
What is 3D Scrollytelling really?
Well, as the name suggests. You scroll, it's obviously 3D and some form of story is being told. And because that's probably not enough for you, I'll digress a little further here.
When we talk about scrollytelling, we usually speak of a continuous animation from the beginning to the end of an individual website page, which can be controlled by scrolling on the page itself.
This animation takes place in real-time or is pre-rendered like a video. While we scroll through the page and follow the animation, UI elements are superimposed over the animation at the same time to support it informatively and enable interaction.
It’s always used to convey a kind of story that we should follow, that arouses our interest, appeals to us on an emotional level and leaves us amazed. You can think of it as a presentation or trailer that comes in the form and layout of a website but with the animations and visuals from a video. Scrollytelling can be about a manufacturing process, a product announcement, the intro to a piece of software or something completely different. How we make use of it is entirely up to our imagination.
How does it differ from traditional storytelling on websites?
Imagine it like this. A professional studio shoots an impressive product trailer, which we then compare with a simple PowerPoint presentation created by a single employee. This roughly describes the worlds that lie between 3D scrollytelling and conventional storytelling.
The PowerPoint presentation may be simple and have all the necessary information, but it's hard to stand out in the crowd with something that doesn't attract attention and make mouths water.
As in the trailer, 3D scrollytelling takes us to a deeper level of communication where we can harness the power of enthusiasm and tension. We use vivid animations and interactive 3D to deliver a story and let the user take full control to scroll through the page. What we achieve goes beyond just information. We’re able to arouse emotions, create lasting impressions and increase the perceived quality and value of what we present.
What kind of products and content are suitable for a 3D Scrollytelling website?
You might be thinking, I develop software, I transport goods or I manufacture metal. I can't build a scrollytelling experience for that and it’s not interesting either.
With 3D scrollytelling there are various ways to use content. You can shoot real footage or put on a full 3D animation that looks realistic or takes on any other form of style. In the end, the deciding factor is always what suits your company and what we want to communicate and evoke.
And making the whole thing exciting is not the problem. After all, we have the most modern technologies and tools at our disposal. Remember, this 3D experience is here for your target group. They are already interested in your products because they represent the solutions to their problems. We're just giving it an elegant touch with which we want to create not only more loyal customers but fanatical followers of your brand.
How are 3D Scrollytelling experiences built?
Now, as mentioned, we have two major options for bringing 2D to the web. As pre-rendered animation and in real time.
Pre-rendered animations
Pre Rendered animations come from the 3D software or editing program. These are usually exported as image sequences and then often used on the web as lot files. On the web you can now control how the image sequence plays out when you scroll. Around 30 frames per second are necessary to perceive it as a fluid animation.
The design process is the same for all 3D scrollytelling websites. Different sections with specific positions of animations are used to overlay the UI content. Once the experience is fully developed and animated on the web, this content gradually appears as the page is scrolled. Scrollytelling animations usually run in both directions, forwards and backwards.
Real-time 3D
Now to the complex part. Real-time is always more complex than anything else but also much more exciting. For development we need 3D software like Blender and well-known development environments on the web to bring the content there to life. WebGL, WebGPU, ThreeJS, R3F or BabylonJS are usually used. These environments build on each other and each offer advantages for different applications of real-time use.
We first develop a scrollytelling concept, the 3D in the software and references for the animations and can then partially export these and partially recreate them on the web. Above all, complex custom effects using shaders or particles require a lot of effort but are the most powerful way to create impressive experiences.
At the end, the various components are put together on the web and consistent animation is programmed for scrolling to make the experience work.
Can a 3D Scrollytelling website work on all devices and browsers?
Yes, 3D scrolling experiences in particular can be optimized for mobile devices.
Transforming the design along with 3D so that it looks good and fits on a small screen is a challenge to overcome. The experience also needs to be further optimized, which becomes easier with time, as an ever-increasing proportion of mobile devices are getting closer and closer to desktop performance. Lastly, UX is a big point. But since our main iteration is scrolling, we have less difficulty staying user-friendly.
How do load times and website performance factors into 3D Scrollytelling?
To find out, we need to decide again which type we are using. When working with pre-rendered image sequences, performance is not an issue and only the overall size of the file. If we decide we need a few hundred high-resolution images, it can take quite a long time for the website to load. By optimizing images for the web, choosing the right format and using fewer images per second, we can improve performance without affecting quality.
If we choose a real-time solution, we have to pay attention to performance and loading time at the same time. The choice and sum of animations, effects and 3D elements have a strong influence on both. Through laborious optimization work at the development and 3D level, good performance can usually be achieved for all platforms. However, the performance is not as good as with a pre-rendered scrollytelling solution.
Can a 3D Scrollytelling website be used for marketing purposes?
Absolutely! You can use it for marketing thanks to the great opportunities to stage things, present them in detail and enable a pictorial narrative. By creating interactions and displaying high-resolution 3D visualizations, you can generate more interest, trigger emotional responses, and increase the perceived quality of your products. Marketing is also the most common reason for using a 3D scrolling experience.
I mean I love experiencing products in a way where words to describe them become unnecessary. And I think I'm not just speaking for myself here. With a little creativity and work we can build tension around just any topic. And once we’ve mastered that, the tools on the web help us carry out our mission and story to let it come alive in an immersive way in 3D.
The impression and moment that your users spend with your product remains in their memory. That’s what’s stored and stands out. Nobody really cares about features. Everyone is interested in how you can solve their problems.
If you can show how you solve their problems using a 3D scrollytelling experience instead of just talking about it you will start to convince more. And if you manage to do this in an exciting, amicable way, then I don't think anything will hold you back to fully engage people. This exact feeling during your experience is what they remember when they see your product again. Often our decisions aren’t rational and especially when it appears that all products are quite similar, it determines how well you can present them.
3 great examples of 3D Scrollytelling:
Apple
https://www.apple.com/macbook-air-13-and-15-m2/
Apple is probably the best-known company that regularly uses pre-rendered scrollytelling to promote new products. They present them in spectacular and close-up animations to highlight quality, special features and their newest innovations. Apple is definitely a master when it comes to presenting a product in such a way that at the end you think: Wow, that was incredible. I really want to own this product!
Ferrum pipe
Ferrum Pipe by Cuberto is a great example that 3D scrollytelling can really be used anywhere. The company develops metal fences and security gates and illustrates their products, use and quality manufacturing in pre-rendered animations on their homepage. The process is easier to understand, interesting to follow, and the perceived quality of the products appears high and modern.
DeSO
DeSo is a first layer-1 blockchain solution that relies on a real-time 3D scrollytelling experience. In order to meet the expectations of the industry, a 3D experience is ideal to score points with your audience. DeSo takes us through an exciting 3D experience on their site to talk about the history and benefits of their product.
Conclusion
3D scrollytelling is a modern solution for presenting on the web in a more exciting, narrative and impressive way. Through our scrolling we influence an animation on the website that is combined with UI elements. The style of this presentation allows us to create an emotional response, leave lasting impressions and increase the perceived quality of our brand and products. Scrollytelling experiences come either in real-time or as a pre-rendered image sequence. The main area of application is marketing to present products.
