Animations

boodoo ships a small library of purposeful animation utilities, all of which respect prefers-reduced-motion.

Animation utilities

fade-in slide-up slide-down slide-left slide-right zoom-in pulse shake glow

<div class="animate-fade-in">Fades in over 0.4s</div>
<div class="animate-slide-up">Slides up from below</div>

Spinning

Delay & duration

Control timing with .delay-{75|100|150|200|300|500} and .duration-{75|100|150|200|300|500|1000|2000|3000}.

delay 100ms delay 300ms delay 500ms

Scroll-triggered

For scroll-triggered animations, use the boodoo.show.animate pattern — add the animation class with JavaScript when the element enters the viewport:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-slide-up');
      observer.unobserve(entry.target);
    }
  });
});
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));

Reduced motion

All of boodoo's motion shuts off when the user prefers reduced motion:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}