Achieving a spin animation on a 3d object triggered by scroll

Hello!

im using wix studio editor and want to achieve the following
a 360 spin on a product triggered by the scroll animation, scroll down: product turns right, scroll up: product turns left.

i tried different approaches, render a 3d model in the editor using JSON, .glb or .gltf. i alo tried couple of third party apps, which enabled the user to interact with the model using mouse gesture, like scroll to zoom and drag to turn. but don’t allow scroll triggered animation.

i was able to work around it with adding multiple product images/frames and animated each image to fade on scroll, so that the models appear to be turning.
it kind of worked but it isn’t the optimal approach. resulting with overlapping images due to a fluid opacity change. on each image i added a fade animation with a pan of 1% to minimise the effect. ex: img 1: fade in from 50% to 51%, Image2 from 52% to 53%… and so on. i used 37 images for that. which i didnt find enough. and adding more will affect the site’s loading time.

i considered adding a video and linking video play time with scroll position. but didn’t find a way to make that work.

i appreciate any input on the subject!

Hi, @makram_Daou !!

If you don’t need full 3D rotation (up, down, left, right) and only require left-right rotation, why not try using a simple sprite animation? If you already have a video that rotates left and right, you could extract individual frames, combine them into a single image, and change the displayed frame based on the scroll amount. I haven’t tried it myself, but it seems like it could work. :wink: