feat: add animate support to popovers, add custom origin middleware and animate from reference origin #1194
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
robinpyon
commented
Dec 13, 2023
There was a problem hiding this comment.
Separated this out into its own component, to match popoverCard.tsx
robinpyon
commented
Dec 13, 2023
| @@ -105,9 +115,9 @@ export const PopoverCard = memo( | |||
| ) | |||
|
|
|||
| return ( | |||
| <Root | |||
| <MotionCard | |||
There was a problem hiding this comment.
Note that we're not conditionally creating this motion component – we're always leveraging motion(Card) even if you don't opt into animate.
Given that we're not rendering these motion elements as wrappers, it felt simpler to just conditionally attach motion props as needed rather than conditionally define this component. WDYT?
There was a problem hiding this comment.
I think it's fine – there might be a tiny perf hit, but nothing compared to perf issues already caused by styled-components
mariuslundgard
approved these changes
Dec 13, 2023
This was referenced Jan 15, 2024
robinpyon
added a commit
that referenced
this pull request
Jan 16, 2024
…nd animate from reference origin (#1194) * refactor: add clarifying comments * feat: animate tooltips + popovers from reference origin, add custom framer-motion middleware * chore(storybook): add animated menu button story
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR adds
animatesupport forPopovercomponents.In addition to fading in, animated popovers will now also slightly scale from the reference element's origin, giving the appearance of popovers very slightly 'growing out'. Since this is a popover prop, it's also possible to apply this animation on
<MenuButton>components too (via thepopoverprop) too.This is done via a custom
originmiddleware which calculates this transform origin offset from both the shifted position and final (not user supplied) floating placement.This middleware is also applied to
<Tooltip>components too.Currently, there's no optionality around animation here – opting in means you get both opacity + scale transitions, though we may want to provide more fine-grained control in future.
Screenflick.Movie.60.mp4