Wow, you have scrolled down a lot to get here. Thank you for your patience! I'm using this last section to give credits to people and projects that helped me building this page. First of all I have to thank the GreenSock Team who makes possible to build this kind of animated web experiences thanks to GSAP. I'm a big fan of their work and of the support they give on their forum. Building this experience was not an easy task by the way, since I'm not really into web design, and this sort of animated web experiences needs quite an amount of design work before working on the raw implementation. In addition, a lot of time is needed in order to ensure a smooth experience and a good performance optimization. The performance is one of the main culprits of animations based websites. That's why I prefered to deliver an optimized version of the page for mobile users, since in my opinion an animated website is enjoyable if you can navigate it at steady 60 FPS and on big screens. Even if this page is highly optimized using the best practices to reduce to a minimum degree CPU usage and move the load to the GPU, leveraging hardware acceleration when possible, and avoiding the animation of resources consuming CSS properties, it would still not be very enjoyable on low end mobile devices. The starting idea was to build a dynamic experience that would give the feeling of movement during the navigation, and of spatial depth using 3D shapes. I decided to focus most of the effects around a simple cube built in plain HTML/CSS, no canvas involved, a cube was the perfect mean to represent every sort of common use objects like cardboard boxes, dices or Rubik's Cubes... I faced some challenges during the development though, and some of them were not objectively trivial as you can see from this answer I received on GSAP support forum 😂 :These are some studies I had to make in order to understand how the rotation physics works inside browser native 3D rendering engine using the transform property:Made this one since I was struggling keeping track of the axes of the cubes during the rotations:The issues to perform sequential rotations in browser seem due to theGimbal Lockissue, which basically leads to the loss of a degree of freedom during the rotational transformations, I might write a blog article on this! All considered this was funny, since parallax scrolling looks to be the trend of the moment!
A big thank goes also to the Vercel team that is working on NextJS framework, delivering cutting edge updates to their product, pushing the Serverless approach narrative trying to change web development for the better.