[feat]: Create an animation abstraction for spring and gesture
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 29.1k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
A clear and concise description of what the feature is
I think we should explore creating an abstraction for use-spring and use-gesture in the same vein as Framer Motion. The goal of the abstraction would be to have a set of components and hooks that cover a higher order of intention. Not so much "I want to use this gesture" and "I want to have this physics simulation" but "I want my element to scale when dragged."
Why should this feature be included?
I have been sitting in the Discord for a while now and trying to help people with their issues. One of the most common I find is when people need to use a gesture and an animation together. It isn't always straight forward how to think about these problems, especially if the goal is a gesture based on physical properties (such as inertia). Also, even in everyday driving of these libraries there is just a ton of boilerplate that gets redone to create basic gesture based animations. A simple abstraction would save lines of code for something like animating a property on hover.
Here are some examples of relevant use cases that I could think of:
- Inertia based gestures. This can be inertia scrolling or intertia based reordering. A common example on mobile would be flicking an item, predicting where the item would land and then doing some logic based on that. Or having an inertia based drag snap to a grid. Currently these are all obtuse to do with both libraries, but very simple with Framer Motion.
- A reordering component. This is another very convenient abstraction in Framer Motion that requires both animation and gesture. It allows a user to easily define an array of items and callbacks for dragging and reordering them. I agree with the Framer team that this goes beyond an UI pattern to boilerplate abstraction.
- Gesture driven animations via props. The ability to intentionally define animation states based on gestures, such as hover or drag, is intuitive and reduces code for simple cases.
- Viewport driven animations via props. Like above, except for viewport properties like if the element is in view. This is another intentional animation type that new users look for.
I think a bonus would be for such an abstraction to apply to r3f so that same intentional concepts cover 3D, but I know this adds an order of magnitude of complexity.
Please provide an example for how this would work
No response
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
The issue names no files or tests; start by reviewing the existing use-spring and use-gesture APIs and the linked Framer Motion documentation. Clarify which intentional gesture and animation behaviors belong in the abstraction, including whether reordering, viewport effects, and r3f support are in scope. Done requires an agreed API and concrete examples or acceptance criteria.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100