motiondivision / motiondivision/motion
[FEATURE] Expose all scroll information via `useScroll`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 33.7k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 14
Description
You can get scroll[X/Y] and scroll[X/Y]Progress from useScroll but often I'd need to know how many pixels I'm away from the maximum offset. This is a bit frustrating, since Framer internally computes scroll[X/Y]Progress via dividing scroll[X/Y] by the maximum offset, but there is no easy way to read out that value. Would be cool if something like scroll[X/Y]Max or even better scroll[X/Y]FromMax was added to useScroll...
I think the relevant file is https://github.com/framer/motion/blob/main/packages/framer-motion/src/value/scroll/utils.ts
const update = () => {
const { xOffset, yOffset, xMaxOffset, yMaxOffset } = getOffsets()
// Set absolute positions
values.scrollX.set(xOffset)
values.scrollY.set(yOffset)
// Set 0-1 progress
setProgress(xOffset, xMaxOffset, values.scrollXProgress)
setProgress(yOffset, yMaxOffset, values.scrollYProgress)
}
Here i think it would be possible to expose xMaxOffset and yMaxOffset to the user?
Additionall it would be nice if one could pass something like calc(100% - 300px) to the offset option from useScroll because currently all absolute (pixel) values are measured from the start of the container and there is no way to specify a pixel value measured from the end of the container...
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with packages/framer-motion/src/value/scroll/utils.ts and trace getOffsets, update, and the existing useScroll offset handling. Define how maximum or distance-from-maximum values should be exposed, then determine whether the requested calc(100% - 300px) offset belongs in the same change. Done means the chosen scroll information and offset behavior are available through useScroll with coverage for the supported cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100