[feat]: Animate Presence component addition
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
A new component / hook that animates elements depending on whether their children are being rendered or not without the need to be passing data (this is similar but separate to useTransition which could be depreciated in favour of this new hook)
Why should this feature be included?
framer-motion has a component called animate presence which is fairly similar to our useTransition except with the latter, you have to pass state to the hook to control the appearance of the animated components.
This isn't the worst thing when you're only controlling one modal for instance, but if you want to control multiple it would be easier to be able to handle the animations depending on whether the dom element was mounted or not (see here for more context).
This feature would hopefully lead into #1628 which is also something I would be very interested in adding to react-spring.
Please provide an example for how this would work
Unlike framer-motion, rs has two parts, the hook that runs outside the react-render world & the animated component that interpolates those SpringValues to be applied to the DOM element.
We could create a new component in a similar API style to AnimatePresence, but it would be more inline with the direction of react-spring if we could make a hook & the an additional HOC built on animated to register these components for the hook to manipulate & track. So an ideal approach can be seen below:
const MyComponent = ({show}) => {
const springs = useAnimatePresence({
from: {
opacity: 0,
},
enter: {
opacity: 1
},
leave: {
opacity: 0
}
})
return show ? <animatedPresence.div style={springs}>Hello world</animatedPresence.div> : null
}
Of course, happy to hear other people's API design ideas // thoughts or even concerns about this feature.
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 by reviewing the existing useTransition API and the proposed useAnimatePresence hook and animatedPresence HOC described in the issue. No files, tests, or entry points are named, so the API and behavior need agreement with maintainers before implementation. Done means an agreed mount and unmount animation design is implemented and validated.
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
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100