From previous value to new value with animation

Is your feature request related to a problem? Please describe.
I use useScroll and useTransform in my home page for my logo in header. And When I scroll down, It shows slowly like I want. But I want it to appear like "initial and animate" animations. Of course I can do this with usePathname and if operations but I want it with one component.

I want to use const value = useMotionValue(0) and when I use value.set(EXAMPLE_VALUE), it must be like this:

• 0
• 0.1765435
• 0.4456454
• 0.7867989
• ...
• EXAMPLE_VALUE

Also, if I'm in home page, so if pathname === "/" I want to use this code block:

useMotionValueEvent(scrollYProgress, "change", (latest) => {
    value.set(latest);
});

I can use this code block but when I'm in another page, I want to set the value to 1. And I want that value will become 1 with animation.

Sorry for my English, I also improve it ^^

Start by reviewing the useMotionValue, useTransform, and useMotionValueEvent APIs mentioned in the issue, especially how value.set() currently updates a value. Define how setting a new value should animate while preserving scroll-driven updates, and verify that the value progresses to the requested target in both the home-page and other-page cases.