How can I stop a fixed Three.js model from scrolling into the next section in Angular (using GSAP + ScrollTrigger)?

Hey everyone 👋

I'm working on an Angular landing page where I'm rendering a Three.js car model using a <canvas> inside a fixed wrapper. The model is animated with GSAP + ScrollTrigger so that it moves between the Hero and About sections.

Everything works as expected there... EXCEPT when I scroll further down to the Services section. Because the model is position: fixed, it continues to appear over that section — which I don’t want.

---

What I Need

I want the 3D model to:

Only appear between the Hero and About sections

Stop/freeze when the About section ends

NOT scroll into the Services section

Not disappear — just stop moving after About

---

HTML Structure

car-model.html
html

home.html:

car-model.css:
.model-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
pointer-events: none;
z-index: 10;
}

.model-wrapper.stopped {
position: absolute;
top: auto;
bottom: 0;
}

car-model.ts (Relevant ScrollTrigger Code):
gsap.registerPlugin(ScrollTrigger);

gsap.set('#car', {
x: 500,
});

gsap.to('#car', {
x: () => {
const para = document.querySelector('#aboutContent') as HTMLElement;
if (para) {
const rect = para.getBoundingClientRect();
const screenCenter = window.innerWidth / 2;
return rect.left - screenCenter - 500;
}
return -100;
},
scrollTrigger: {
trigger: '#about',
start: 'top center',
end: 'top top',
scrub: true,
},
});

ScrollTrigger.create({
trigger: '#about',
start: 'bottom top',
onEnter: () => document.getElementById('car')?.classList.add('stopped'),
onLeaveBack: () => document.getElementById('car')?.classList.remove('stopped'),
});