Models sensitively 'blasting' up & down and not following the container

I’m using 3 models on my website.
At first, I have set the group’s Y position to adapt to the scrolling following this tutorial.

It was working well and the models were sticking and following the container and the text inside while scrolling up & down just like this:

Then I changed the all the models to 3 different models I downloaded from Sketchfab.
Just replaced the filename and didn’t change anything in the code.

Now, when I scroll up and down, the new models just blast really fast and only aligned in center when I scroll to the middle of the group container :confused:
As you can see here in the gif, if I move just a little off the container, it will blast off the viewport:

Codesandbox Demo

They don’t stick with the container and text anymore.

I have tried other models but it just the same problem.

→ How to keep them stay with the text and container?

Have anyone encountered with this problem before?

Please help me out, thank you guys so much!!

this stuff is easier now because of scrollcontrols, it almost does all the work for you: GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber click through the demos

1 Like