motiondivision / motiondivision/motion

[FEATURE] Expose all scroll information via `useScroll`

Open
#2,189 0 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.