3D Model Animator
3D Model Animator brings interactive 3D to your Framer site without writing a line of code. Upload any GLB model, set your scroll sections, and the camera smoothly animates between each position as the user scrolls through your page.Perfect for product reveals, hero sequences, and scroll-driven storytelling.What it does Loads any GLB model — static or animated Smoothly lerps the camera position, look-at target, and field of view between scroll sections Plays and stops named animation clips per section Holds the last camera position when scrolling past unmapped sections Restores start position and animation when scrolling back to the top Supports Draco-compressed GLBs Built-in Fox placeholder so you can set up your layout before your model is ready Fully responsive — works on desktop, tablet, and mobile How to use Drop the component onto your canvas. Upload your GLB via the Model File picker. The Fox placeholder loads automatically until then. Set your start camera position using the cam and look controls. Add a Positions entry for each Framer section, linking its HTML ID to a camera position. Optionally set an animation clip name per section. Preview in Framer and publish. GLB requirements Format: .glb (binary GLTF 2.0) Textures: embedded PNG or JPEG (not KTX2) Compression: Draco supported, uncompressed also works Coordinate system: Y-up (Blender GLTF exporter handles this automatically) Validate your file free at gltf.report before uploading Panel controls Camera: camX, camY, camZ, lookX, lookY, lookZ, fov per section Animations: animation name and play/pause per section Start state: separate camera and animation for the pre-scroll position Preview modes: Live, Start, and Section-by-section preview Trigger modes: Top, Center, Full viewportInstructionsUser GuideInstructonsQuick Start Drop the 3D Model Animator component onto your Framer canvas. Upload a GLB file using the Model File picker in the right panel. A Fox placeholder loads automatically until you upload your own. Set your Start Position using the cam and look controls. Switch Preview Mode to Start to see what users see when the page first loads. Add your page sections to the Positions array. Each entry links a Framer section ID to a camera position and optional animation. Switch Preview Mode to Section and step through each section number to verify each camera position. Switch Preview Mode back to Live (Scroll) and preview your page. Panel Controls ReferenceModelModel FileUpload a .glb file. Leave empty to use the built-in Fox placeholder.Environment IntensityControls the brightness of the environment lighting. Default is 1. Range 0–3.Start PositionThese values set where the camera sits before the user has scrolled into any section.camX / camY / camZCamera position in 3D space. camZ controls how close or far the camera is.lookX / lookY / lookZThe point in 3D space the camera looks at. Usually 0, 0, 0 to look at the model centre.fovField of view in degrees. Lower values zoom in, higher values zoom out. Range 20–90.Start AnimationClip name from the GLB to play when the user is above all scroll sections.Start Anim PlayWhether to play or pause the start animation.Scroll Sections (Positions)Each entry in the Positions array maps a Framer section to a camera state.SectionThe exact HTML ID of the Framer section frame. Must match the ID set in Framer’s element panel.camX / camY / camZCamera position to lerp to when this section is active.lookX / lookY / lookZLook-at target for this section.fovField of view for this section.Animation NameClip name from the GLB to play when this section is reached. Case insensitive.Animation PlayPlay or Pause the animation when this section becomes active.Preview & TriggerPreview ModeLive (Scroll): normal scroll behaviour. Start: locks camera to start position. Section: locks camera to the selected section number.Preview SectionWhich section number to preview (only visible when Preview Mode is set to Section).Trigger ModeTop: section triggers when its top edge hits the viewport top. Center: triggers at viewport centre. Full: triggers when the full section is visible.Setting Up Scroll SectionsEach scroll section needs a unique HTML ID in Framer. Here’s how to set one: Select the frame or section you want to use as a trigger. Open the Element panel on the right. Scroll down to find the ID field. Type a unique ID with no spaces, e.g. hero, section-2, product-close. In the Scroll3D component panel, add a new entry to Positions and type the same ID into the Section field. Tip: IDs are case sensitive. ‘Hero’ and ‘hero’ are different. Keep them lowercase to avoid mistakes.Setting Up AnimationsAnimations are driven by clip names baked into the GLB file. To find the clip names in your model: Go to gltf.report and drop your GLB file in. Click the Animations tab. You will see a list of all clip names. Copy the clip name exactly and paste it into the Animation Name field on the relevant section. Tip: The component matches clip names case-insensitively, so ‘Walk’ and ‘walk’ both work.If a section has no Animation Name set, the last active animation continues playing. If the user scrolls back above all sections, the Start Animation plays.Frequently Asked QuestionsThe model loads in the Framer canvas but not in preview or the published site.This usually means the model file is being referenced from an external URL rather than being uploaded directly into Framer. Always upload the GLB via the Model File picker in the component panel. External URLs are blocked by Framer’s content security policy.My model appears but has no textures or looks pitch black.The most common cause is a Sketchfab export with KTX2 compressed textures, which this component does not support. Download the GLB, open it in gltf.report, click Optimize, disable KTX2 textures, and re-export. Then re-upload to Framer.My model does not load at all — the canvas is blank. Check that the file is a GLB (binary GLTF), not a .gltf folder or .fbx. If you exported from Blender, make sure Draco compression is turned off. Open gltf.report to validate the file and check for errors. Try the Khronos Fox model as a known-good test: download from the URL in the GLB Specification section and upload it to Framer. Animations are not playing when I scroll. Check the Animation Name field matches the clip name exactly (check gltf.report Animations tab). Make sure the Framer section ID matches the Section field in the Positions array exactly. Check that Animation Play is set to Play, not Pause. Verify the section has a valid HTML ID set in Framer’s element panel. The camera stays at the start position and never moves when I scroll.The section element ID in Framer does not match the Section field in the component panel. Double-check both — they are case sensitive.The model is visible but the wrong size or off-centre.The component auto-scales and centres the model from mesh geometry. If your model has a large empty skeleton or armature, the bounds calculation may be off. In Blender, apply all transforms before export (Object > Apply > All Transforms) and make sure the origin is at the centre of the mesh.Changing a section’s camera values in the panel does not update the canvas.Switch Preview Mode to Start and then back to Section. Framer sometimes needs a prop change to re-trigger a re-render.Can I use multiple Scroll3D Viewer components on one page?Yes, each instance is independent. Each needs its own set of Framer section IDs — do not share IDs between two component instances.GLB File SpecificationThis section defines exactly what GLB files will and will not work with 3D Model Animator. Follow these requirements to avoid loading failures.Required FormatFile format.glb (binary GLTF 2.0) only. Do not use .gltf + .bin + textures folders.All assets embeddedTextures and geometry must be packed inside the single .glb file. External texture references will not load.Geometry compressionDraco compression is supported. Non-compressed geometry also works.Texture formatStandard PNG or JPEG textures embedded in the GLB. KTX2 / Basis compressed textures are not supported.Coordinate systemY-up (Three.js default). Blender’s GLTF exporter corrects Z-up automatically. Other tools may not.ScaleAny size. The component auto-normalises the model to fit a size-3 bounding box.Supported Material TypesMeshStandardMaterialFully supported. All PBR maps handled: albedo, normal, roughness, metalness, emissive.MeshPhysicalMaterialSupported.MeshBasicMaterialSupported. Will render but does not respond to lighting.Custom ShaderMaterialNot supported. Will load but materials will not render correctly.AnimationsThe component supports GLB files with named animation clips. Clips are played by name via the Animation Name field in the Framer panel.Clip typeKeyframe animations (position, rotation, scale). Morph targets supported.Skinned meshesSupported (rigged characters, mechanical rigs).Multiple clipsSupported. Each clip is accessible by name.LoopingAll clips loop by default.Clip namingNames are matched case-insensitively. Spaces are allowed.Finding clip namesOpen the file at gltf.report and check the Animations tab for exact names.What Will Not WorkKTX2 / Basis texturesTextures will fail to load silently. Re-export without KTX2.External texture referencesOnly embedded textures load. Pack all assets into the GLB..gltf + .bin formatOnly single-file .glb is accepted by the file picker.Multi-file archivesZIP files or folders are not supported.Z-up coordinate systemModel will appear rotated 90 degrees. Apply transforms in Blender before export.Recommended Export SettingsBlenderFormatglTF Binary (.glb)Geometry compressionOff (or Draco if smaller file size is needed)TexturesEmbed (not referenced)Texture formatJPEG or PNG (not WebP, not KTX2)Apply transformsOn (Object > Apply > All Transforms before export)AnimationsInclude selected animations. Name each action in the Action Editor before export.SplineFormatExport > GLTF/GLBTexturesEmbed texturesSketchfabDownload formatGLBAfter downloadRun through gltf.report > Optimize > disable KTX2 and Draco if issues occurValidation ToolBefore uploading any GLB to Framer, validate it at gltf.report (free, browser-based). It will flag: KTX2 or Basis compressed textures Draco compression status Missing or external textures Animation clip names and counts Schema errors that would prevent loading Test ModelUse the Khronos Fox model as a guaranteed-working test. It has three named animation clips (Survey, Walk, Run), embedded textures, no Draco, and correct coordinate system.Download URL:https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/Fox/glTF-Binary/Fox.glbDownload the file, then upload it to Framer via the Model File picker. Do not paste the URL directly.
Get it → framerbitz.gumroad.com