3D SVG JSON vs.
3D Spline.Design
Our challenge was quite clear: we needed to create something animated, 3D, potentially interactive, and lightweight to ensure fast webpage loading.
Our preferred route was to take the Lottie/Rive approach, which offered great potential. However, true 3D implementation posed its own set of challenges, particularly when aiming for non-rasterized 3D SVG JSON animations. I did manage to find a solution that worked in most cases, though it required a significant amount of manual labor.
The smarter approach? Well, it was all about 'building once and deploying multiple times.' We opted to craft assets using a genuine 3D application, ensuring their versatility for animated videos, saving them as vector static images, and finally, exporting them to Spline.Design for seamless integration of micro-animations on the website.
It was all about working smarter, not harder, and achieving the results we needed!
Working from some initial designs from the UI and graphic designers, I made a demo of some of the potential page animations as well as some of the richer and more complex micro/embedded animations.
Having some interactive elements as a bonus. This pre-rendered example is the quality we aim to achieve, but without embedding any heavy videos or GIFs.
The challenge with this approach is that every polygon needs to be a separate 3D shape layer in After Effects.
When the object moves, the shape layer nearest to the camera needs to be moved to the top, otherwise, we get issues that look a bit like back-face-culling. See the upper example.
I had hoped to fix this using a custom After Effects Script:
'toCompVec([0, 0, 1])[2] > 0 ? value : 0'
Which in theory should work...but it didn't.
I also tried out Extrudizer from AEscripts, but during this project, it must have been due for an update, as it was very buggy and only worked 1 time out of 10. Also, it couldn't handle more complex shapes or shapes that have holes in them.
(Update - I see there is a new version of this plugin now)
The second issue is that the 3D After Effects camera, which is needed to create a more accurate isometric look does not export into JSON files.
The second example below the first is a working 3D SVG JSON animation.
Tested in Lottie and working as expected
For anyone who is interested, this rough tutorial that I made for the motion team demonstrates my unique approach to creating 3D SVG JSON animations.
Naturally, I am on the waiting list for LottieFiles Creator, but I am currently 12,525 place in the queue for the beta.
The more elegant and efficient option for this specific project is to simply export baked FBX files from Cinema 4D or another 3D application and import them into Spline.Design. OR, build in Spline.Design directly. Please see below a live example which is both pre-animated as well as interactive. In addition, additional animations can potentially be triggered by clicking and/or scrolling. Vectory was also considered, but Spline.Design was better suited to our needs.
Interactive MetaMask fox - on desktop it should follow the mouse, for mobile use two fingers to rotate and scale.
3D SVG isometric JSON
Illustration and Lottie/Rive animation
