Web Animations with Drupal: Performance and Accessibility
Last updated: March 2026 · Reading time: 4 minutes
An animation occurs when individual frames are played at a minimum of 24 frames per second, creating a fluid motion. On the web, this principle works via CSS transitions, JavaScript animations, or the Web Animations API.
The purpose goes far beyond decoration: micro-interactions give users feedback, scroll animations direct attention, and animated data visualizations make complex relationships tangible.
Why Animations Can Compromise Your Performance
Every animation costs computing power. CSS animations on transform and opacity are GPU-accelerated and performant. Animations on width, height, or top force layout recalculations and block the main thread.
In Drupal projects, we follow three principles: only animate GPU-friendly properties, start animations via Intersection Observer only when visible, and consistently respect prefers-reduced-motion.
Animations and Accessibility
WCAG 2.1 requires that users can stop, pause, or hide animations (Success Criterion 2.3.1). This is not an optional recommendation — since June 2025, the European Accessibility Act makes it mandatory for many digital offerings.
Drupal supports this via the prefers-reduced-motion media query. Themes and modules developed by arocom respect this setting by default.
Animations in Your Drupal Project?
Find out whether your animations meet performance and accessibility standards — with the Future Check.
Which animations are performant?
CSS animations on transform and opacity are GPU-accelerated and do not affect Core Web Vitals. JavaScript-based animations on layout properties like width or top are expensive and block the rendering process.
Does Drupal support prefers-reduced-motion?
Drupal itself does not ship animations. The responsibility lies with the theme and the modules used. arocom ensures in all projects that prefers-reduced-motion is respected.
Read more
- WCAG 2.1 explained — The accessibility standard
- Accessibility — Our services
- Future Check (Audit) — Independent analysis
Discover a random article
Questions about this topic? We'd love to help.
Drupal Future Check
Checklist: Is your Drupal installation future-proof? 15 checkpoints.
Was this article helpful?