Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Feature]: Add transitions for popover/drawer/menu/tooltip components

See original GitHub issue

Is your feature request related to a problem? Please describe. To smoothen the UX around the entry and exit of off-canvas and popover-type components, I would like for us to have some CSS transitions.

Describe the solution you’d like

  • Add transitions scale to the theme object for constrained transitions
  • Allow users to define the transitions easing, duration, e.t.c for component
  • Transitions can be opt-out.

Describe alternatives you’ve considered N/A

Additional context

  • We currently consume anime js as a dependency. Perhaps it can be used since it provides some pretty good and performant JS animations.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:10 (8 by maintainers)

github_iconTop GitHub Comments

DRD161commented, May 16, 2021

Hi there! Loving Chakra so far! Wanted to see if there has been any movement on this or if anyone can point me in the direction of how I can easily change the drawer open animation. Thanks!

Anmol270900commented, Jul 18, 2020

Hi! I am new here, and have been looking for beginner friendly issues. May I work on this one?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tooltips - Bootstrap
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Read more >
Popovers - Presentation - Human Interface Guidelines - Design
A popover is a transient view that appears above other content onscreen when people click or tap a control or interactive area.
Read more >
Menu component - Vuetify
With the new v-slot syntax, nested activators such as those seen with a v-menu and v-tooltip attached to the same activator button, need...
Read more >
Popover - Headless UI
Popovers are built using the Popover , Popover.Button , and Popover.Panel components. Clicking the Popover.Button will automatically open/close the Popover.
Read more >
Overlays | React-Bootstrap
Overlay is the fundamental component for positioning and controlling tooltip visibility. It's a wrapper around Popper.js, that adds support for transitions, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found