Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(animations): add animations to dialog and tooltips. #1187

Merged
merged 6 commits into from
Nov 22, 2023

Conversation

pedrobonamin
Copy link
Contributor

@pedrobonamin pedrobonamin commented Nov 21, 2023

Adds animation to Dialog and Tooltips.

  • Tooltips include a presence animation, it means, an animation handled by framer-motion will be triggered on mount and unmount of the element.
  • Dialogs only include a css enter animation, it was not possible to easily include framer motion to handle the animation as the extra wrappers break the dialog style. Also the <AnimatePresence> wrapper would need to be added in the consumer and not in the ui component, given that the Dialog don't receive a show prop, and that logic is handled in the consumers.
Dialog.animation.mov
Screen.Recording.2023-11-18.at.10.51.20.mov

Copy link

vercel bot commented Nov 21, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
sanity-ui-workshop ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 22, 2023 4:48pm
1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
sanity-ui-storybook ⬜️ Ignored (Inspect) Visit Preview Nov 22, 2023 4:48pm

@pedrobonamin pedrobonamin changed the title Alpha animations feat(animations): add animations to dialog and tooltips. Nov 21, 2023
Copy link
Contributor

@robinpyon robinpyon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @pedrobonamin!

Tooltip animations look and feel great, would be awesome if we could facilitate exit animations in dialogs too, but understand how this could be a little tricky

@robinpyon robinpyon merged commit 0e10f43 into alpha Nov 22, 2023
@robinpyon robinpyon deleted the alpha-animations branch November 22, 2023 16:49
mariuslundgard pushed a commit that referenced this pull request Dec 7, 2023
* feat(animations): add presence animations to tooltip

* feat(animations): add animation to dialog

* chore(storybook): pass story args to delay provider

* chore: update TSdocs to make them more storybook friendly

* fixup! chore: update TSdocs to make them more storybook friendly

* Revert "chore(storybook): pass story args to delay provider"

This reverts commit 3a19fb9.
robinpyon pushed a commit that referenced this pull request Jan 16, 2024
* feat(animations): add presence animations to tooltip

* feat(animations): add animation to dialog

* chore(storybook): pass story args to delay provider

* chore: update TSdocs to make them more storybook friendly

* fixup! chore: update TSdocs to make them more storybook friendly

* Revert "chore(storybook): pass story args to delay provider"

This reverts commit 3a19fb9.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants