Code written // edited while I was very sleepy, proceed with caution.
Lerp wrapped in a class to help manage the state of the lerped value
This snippet below has the same functionality as this entire library, I just find it easier and a bit cleaner to encapsulate some of the logic into a class.
let delayedX = 0;
let delayedY = 0;
addEventListener("mousemove", (e) => {
const smoothness = 0.3;
delayedX = lerp(delayedX, e.clientX, smoothness);
delayedY = lerp(delayedY, e.clientY, smoothness);
});
function aFunctionThatCallsManyTimes(){
positionOfSomething.x = delayedX;
positionOfSomething.y = delayedY;
}
function lerp(x: number, y: number, t: number){
return x + (y - x) * t;
}
Imagine if your app was a little bigger and the function that calls requestAnimationFrame, the addEventListener, and lerp, are all in different files, that'd definitely cause someone some mild headaches. Using this, you will be able to:
Somewhere outside the function that calls requestAnimationFrame()
//lower = smoother
const smoothness = 0.03;
const tween = new Tween(smoothness);
Somewhere inside the function that calls requestAnimationFrame()
const { x, y } = tween.updateCoords(
mouse.x,
mouse.y
);
Keep reference to the value of tweened mouse coordinates in React (with just a little fewer lines of code)
const delayedMouse = useMemo(() => new Tween(smoothness),[]);
//or
const delayedMouse = useRef(new Tween(smoothness));
document.addEventListener("mousemove", (e) => tween.updateCoords(e.clientX, e.clientY));
//or
document.addEventListener("mousemove", (e) => tween.current.updateCoords(e.clientX, e.clientY));
https://github.com/Khongchai/serenade-on-a-dream/blob/main/src/utils/delayedMouse.ts