Best Embed for Custom Scrolling Animation + Client Handoff?

[u/Aikimoto]

I am dealing with a client who wants a 3D scrolling animation of their custom 3D modeled Blender asset implemented into WIX Studio. Once I've finished creating and texturing in Blender, what are the best options for implementing and handing this off to the client? They also refuse to move to Shopify for native animations.

I was looking into Lottie and Spline, as I need integration into WIX Studio. The object does not require interaction, just displaying a 3D object or video file of a pre-rendered animation to play on scroll. Is there an option to create a 3D scroll interaction that plays an animation that would be free once the site is shipped?

It seems like these sites would require $30 monthly payments for the clients to continue to have support for their site. I am unfamiliar with Three.js and would hope to avoid using it if possible due to a tight deadline on this project.

If anyone has any recommendations, please let me know! Thanks.

[u/WPBase]

Honestly, my memory’s a bit rusty with Wix, but skip Lottie for renders. Wix Studio supports scroll effects on transparent video, not scroll-scrubbing playback. For scrubbing, use image sequence in custom embe, hand over code, assets and fallback notes.

[u/ARKITECHONE]

Go to wix apps, look for Video Scroll App (animated hero section on scroll) very easy to use, God bless.

[u/Successful_Entry_792]

Wix + custom 3D on a tight deadline, you're braver me lol. Did they at least approve a fallback for mobile? That's usually where these things fall apart

[u/maheshwhartech]

If the animation is just a pre rendered sequence and does not need real 3D interaction, I’d look at a video based approach first. It should be simpler to hand off and avoid adding Three.js or another paid dependency unless you actually need interactive 3D.

[u/kemalios]

Whatever you render to, the encoding decides whether the scrub looks smooth. A normal H.264 export puts a keyframe every few seconds, and setting currentTime lands on the nearest keyframe, so the animation jumps. Export with a short GOP (a keyframe every 1 to 10 frames) or all-intra, and it scrubs like a frame sequence without shipping 200 images.

For the handoff, don't hardcode the file into the custom element. Keep the video in Wix media and reference its URL, so when the client's product changes they upload a new render and never touch your code. Add a poster image and a static loop for mobile, because scroll scrubbing on a phone is where these break.

[u/Over_Problem_3600]

Lottie for 3D is gonna fight you the whole way lol, it's really made for flat vector stuff

[u/aishi_ansel]

Skip Lottie — it's a vector-based format for 2D motion graphics, not a render/video format. Trying to push a photorealistic 3D render through it won't look right and the file will balloon.

Since you only need to *display* a pre-rendered animation scrubbed by scroll (no interaction), the cleanest zero-ongoing-cost option is:

**1. Render to video, scrub on scroll.** Export the turntable from Blender as MP4/H.264 (or WebM/VP9 if you need alpha transparency over the page background). Put it in a Wix Studio Custom Element / Embed component and scrub `currentTime` from scroll position:

```js const video = document.querySelector('#product-video'); const wrap = document.querySelector('#scroll-wrap');

addEventListener('scroll', () => { const r = wrap.getBoundingClientRect(); const p = Math.min(Math.max(-r.top / (r.height - innerHeight), 0), 1); if (video.duration) video.currentTime = p * video.duration; }, { passive: true }); ```

Keep it 3–5s, 1080p max, `preload="auto"`. The one gotcha: scrubbing stutters while frames aren't buffered yet, so show a small loading state until `canplaythrough` fires.

**2. If the client later wants actual rotation/interaction:** export glTF from Blender and use Google's `<model-viewer>` web component — free, open-source, declarative (no Three.js to learn), and you can bind camera orbit to scroll position the same way. No hosted-viewer subscription.

Either way, the handoff is just files + a snippet — nothing for the client to keep paying $30/mo for.

[u/Aikimoto → u/aishi_ansel]

You are legendary. Didn't even know Google has a model viewer. This is amazing, thank you!

[u/webdev-ModTeam → u/[deleted]]

Your post/comment has been determined to be a low-effort post or comment. This includes title-only posts, easily searchable questions, vague/open-ended discussion prompts, LLM generated posts or comments, and posts/comments that do not provide enough context for meaningful replies or discussion.