This is a common issue when embedding Spine animations (typically via the Spine Web Player or Spine Web Components) in a webpage, particularly in footer regions. The jitter/jumping during scrolling is almost always a CSS/layout issue rather than anything to do with the Spine export itself — so your instinct is correct!
Here are the most common causes and fixes to investigate:
Canvas/Container Positioning
The Spine web player renders into a <canvas> element. If the container isn't positioned correctly, it can cause jumpy behavior during scroll. Make sure the footer container uses:
position: relative; /* or fixed/absolute depending on your layout */
overflow: hidden;
Avoid mixing position: static on the parent with absolutely positioned children.
Avoid transform or will-change on ancestor elements
If any parent element of the Spine canvas has a CSS transform, will-change, or filter property applied, it can create a new stacking context and cause rendering glitches during scroll. Check all ancestor elements up the DOM tree.
Use pointer-events: none on the canvas
If scroll events are being intercepted by the canvas, it can cause stuttering:
canvas {
pointer-events: none;
}
Hardware acceleration
Try forcing GPU compositing on the canvas container:
.spine-footer-container {
transform: translateZ(0);
backface-visibility: hidden;
}
Fixed footer approach
If the footer is meant to be a sticky/fixed element, make sure it uses position: fixed with defined bottom, left, and width values, rather than relying on the normal document flow.
Check the player size is explicitly set
The Spine player can behave unpredictably if its container doesn't have an explicit width and height defined in CSS. Make sure the container div has something like:
width: 100%;
height: 200px; /* or whatever your footer height is */
Since it works fine as a static image, the layout itself is sound — it's very likely one of the above CSS conflicts causing the canvas to repaint/reposition on scroll events. Having your nephew share the relevant HTML/CSS snippet would make it much easier to pinpoint the exact cause!
