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:
Created 3 years ago
Comments:10 (8 by maintainers)

Top GitHub Comments

1reaction

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!

1reaction

Anmol270900commented, Jul 18, 2020

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

Top 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.

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.

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...

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.

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, ...