Animation Engine

Model Viewer

Drop a real 3D model (glTF / GLB) onto any page — orbit, zoom, PBR lighting, ground shadow, embedded clips, hotspots and AR. Then Scroll Choreography pins it in a fixed layer and flies it across your sections — position, rotation, scale and opacity keyed to scroll — so a product can drop into the hero and travel, spinning, all the way down to the last section.

A real 3D element

Drag it. Spin it. Zoom in.

This is a live glTF model rendered by <model-viewer> — drag to orbit, scroll or pinch to zoom. Add it from Media Elements, paste a .glb URL, and set lighting, ground shadow, hotspots and AR from its tabs.

Scroll Choreography

Now make it move with the page.

Turn on “Choreograph on scroll” and give the model a pose at each scroll stop — position, rotation, scale and opacity. It pins in a fixed, transparent layer so your sections scroll over and under it, and it interpolates between the poses, scrubbed to your scroll. Keep scrolling ↓

① Drops into view

At 0% it starts above the fold and fully transparent; by the first stop it has dropped to centre and faded in.

② Glides across, rotating

Between stops it eases sideways while the camera orbits it — a real turntable in 3D, not a flat CSS spin.

③ …and slips behind your copy

This heading’s column has a higher z-index than the model’s Layer, so the astronaut passes behind the text. Lower the Layer and it floats in front instead — your call, per section.

④ Comes to rest

At 100% it settles into its final pose, low and centred. Scroll back up and the whole sequence plays in reverse, frame for frame.

How to set it up

Add it in under a minute

  1. Add a Model Viewer element (Media Elements) and paste a .glb / .gltf URL.
  2. Open the Scroll Choreography tab and turn on “Choreograph on scroll”.
  3. Add Keyframes — each is a pose (position, scale, turntable + tilt rotation, opacity) at a scroll %. Start high & transparent, drop to centre, then travel.
  4. Set Scroll length to roughly how many screens the model should travel across, and Layer (z-index) to sit in front of or behind your content.
  5. Build your normal sections below it — they scroll over and under the pinned model.
Open the manual

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free