# Add smoothed out stops to camera following spline curve three.js

I have been experimenting with three.js for a website I’m making.

I came across the spline curve solution in order to make a camera follow a cinematic path, and linked it to the drei’s scroll component in order to make the camera follow a cinematic path relative to the current scroll of the page.

The problem that I’m facing is that I want the camera to have smoothed out stop points, I have already successfully added stop points without the smoothing, by using the range function from the offset object from the Drei’s scroll component and it works just fine.

I’m looking for a way to slow down the camera before it stops. Already tried to change the offset.range value (which is linear) to an exponential value, this partially works it slows down the camera movement until half of the function and after coming to a complete stop it turns around and goes in reverse in the path.

This is basically how i manage to add the stop points.

``````    const scrollReduction = stops.reduce((acc, value) => {
const currentRange = scroll.range(value, individualBreakOffset);

//transform linear movement into exponential.
//const scrollSmoothOffset =
//(Math.pow(breakingSmoothing, currentRange) - 1) /
//(breakingSmoothing - 1);

return acc + individualBreakOffset * currentRange;
}, 0);

let currentScroll =
Math.abs(scrollReduction - scroll?.offset) / maximunScrollAmount;
``````

Please let me know if you need any information.

Just for the record, I was able to accomplish this.
This is basically how I did it

``````
const SLOWDOWN_FACTOR = 7; // the lower the slower it goes
const STOP_POINTS = [0.105, 0.25, 0.7, 0.8, 0.9, 0.4]; // they have to be separated by one SMOOTH_AMOUNT unit for example if smooth amount is 0.1 and the first stop point is 0.1 the second o stop_point has to be > 0.2
const SMOOTH_AMOUNT = 0.1; // how much time the smooth takes
``````
``````    const totalSmooth = STOP_POINTS.reduce((prev, current) => {
const smoothRange = scroll.range(current, SMOOTH_AMOUNT);
const smoothCurve = scroll.curve(current, SMOOTH_AMOUNT);

return (
prev + smoothRange / (10 + SLOWDOWN_FACTOR * (1 - smoothCurve / 1.3))
);
}, 0);
``````
``````
const currentScroll =
(scroll?.offset - totalSmooth) /
(1 - (1 / (10 + SLOWDOWN_FACTOR)) * STOP_POINTS.length);
``````