Help Needed: HTML Content Bouncing During Camera Scroll Animation in React Three Fiber

Questions
1

Hello Three.js community, I am Marwan,

I’m working on a React Three Fiber component that displays HTML content synchronized with a 3D camera scroll animation. I’m experiencing an issue where the HTML content “bounces” or flickers during the animation, particularly when updating the position based on scroll progress.

I have a HeroContent component that:

  1. Renders HTML content using @react-three/drei/Html
  2. Updates its Y-position based on scroll progress
  3. Fades in/out based on scroll position

The core animation logic is in a useFrame hook that:

  • Calculates position based on scroll progress (threeDHeroScrollProgress)
  • Updates the group’s Y-position
  • Controls opacity fade-in effect

The Issue

When scrolling:

  1. The HTML content doesn’t move smoothly with the camera
  2. I observe visible “bouncing” or position jumps
  3. The effect is most noticeable during mid-scroll (progress 0.85-1.0 range)

useFrame(({ camera }) => {
if (!groupRef.current || !htmlRef.current) return;

const progress = threeDHeroScrollProgress;
const appearStart = 0.7;

let heroY = -3; 

if (progress >= 0.85 && progress <= 4) {
  const tunnelProgress = (progress - 0.85) / 0.15; 
  heroY = -3 + tunnelProgress * -9; 
}

// Set the position directly
groupRef.current.position.set(0, heroY, 0);
groupRef.current.quaternion.copy(camera.quaternion);

// Opacity logic
const fadeInStart = appearStart;
const fadeInEnd = appearStart + 0.1;
const opacity = THREE.MathUtils.clamp(
  (progress - fadeInStart) / (fadeInEnd - fadeInStart),
  0,
  1
);
htmlRef.current.style.opacity = opacity.toString();

});