Reputation: 581
When using useScroll and useSpring in Motion. If you have some scroll progress then, on page refresh : The animation restarts and animate progressively to match scroll value, instead of directly be on the proper value, then animate on scroll change.
This behaviour is on the documentation example, and you can have the code along. Try to scroll a bit, then refresh the page: https://examples.motion.dev/react/scroll-linked-with-spring
import { motion, useSpring, useScroll } from "motion/react"
export default function ScrollLinked() {
const { scrollYProgress } = useScroll()
const scaleX = useSpring(scrollYProgress, {
stiffness: 100,
damping: 30,
restDelta: 0.001,
})
return (
<>
<motion.div
id="scroll-indicator"
style={{
scaleX,
position: "fixed",
top: 0,
left: 0,
right: 0,
height: 10,
originX: 0,
backgroundColor: "#ff0088",
}}
/>
<Content />
</>
)
}
When not using useSpring the value is directly well set. From some debug, it seems the issue is the initial value of scroll is 0, even when some scrolling exists. From there it seems normal that useSpring acts like this (it interprets a change in scroll value from 0 to whatever value it is now).
An additional link for my specific use case, you can see why it's an issue when scrolling a bit, then refresh.
Upvotes: 0
Views: 19