Bootstrap v5 - Animation Directives

Created by: ex-tag

Please expose animations for Bootstrap v5. There is an enormous wow-factor missing, because developers can't leverage standardized animate-* directives.

Animation libraries with Bootstrap are sub-optimal

TailwindCSS https://tailwindcss.com/docs/animation is offering - animate-ping, animate-pulse, animate-spin, and animate-bounce
Animate.css https://animate.style has had animations for a few years - animate-bounce, animate-flash, animate-pulse, animate-rubberBand, animate-shakeX, animate-shakeY, animate-headShake, etc
React-Spring https://www.react-spring.io/docs/hooks/examples provides animation chains. And Bootstrap components (and sub-components) could have animation chains (see https://codesandbox.io/embed/2v716k56pr)

Some might question "Why not just use these libraries with Bootstrap?", but for anyone that has spent time with these libraries - they aren't made for Bootstrap components - and getting these to work cleanly with Bootstrap requires a lot of customization. Essentially any work is an unofficial hack, because it can introduce glitches, and can become obsolete when the Bootstrap framework moves to the next version.

Bootstrap animations should be standardized

I think that by default, all components should be given animate-toggle (or a-toggle for short), which is a simple show-hide animation. Currently, components use a mix of animations without standardization.

For example:

Alerts with alert-dismissible should by default use a-toggle (not a-fade)
Carousel slides behave correctly, the default is a-toggle and the a-slide is needed for the slide animation. However, the controls should not be animated on hover without a-hover-light.
Collapse and Accordian should by default be a-toggle (not a-slide-down)
Checkboxes should be a-toggle (not a-fade)
List groups (tabbable panes), behave as expected (use a-toggle by default), but the buttons should use a-hover-darken
Models should not have fade or backdrop by default, unless given a-fade-down, a-fade-up, and the backdrop a-fade
Navs tabs behave as expected (use a-toggle by default)
Popover should be a-toggle (not a-fade)
Progress bar that is animated should be a-bg-slide-left (not progress-bar-animated)
Spinners should be a-spin-right, and a-pulse
Toasts, and Tooltips should be a-toggle (not a-fade)

More trivial examples:

Buttons and links should not change on hover without a-hover-dark, and a-hover-underline
Dropdown buttons and Inputs, should not outline without a-outline
Checkbox, Range, and Radio should not darken on click-down, unless given a-darken class

Also consider animation chains

<span class="first-element a-fade-in">Good</span>
<!-- this animation runs after the previous animation stops -->
<span class="a-fade-in" data-animate-after="first-element">Morning</span>