Bringing Drupal to Life: A Motion Designer’s Guide for Frontend Devs

Session Room
Room 3 (Acquia)
Time Slot
Duration
40 min
Speaker(s)
Session track
Coding & Site Building
Experience level
Intermediate

Your code is clean, but does your site feel alive? Join this session to learn how motion principles can turn your Drupal site into an engaging experience. Stop guessing CSS transition values and learn how to guide users intuitively through your interface.

Prerequisite

No motion design experience is required. Attendees should have a basic understanding of Frontend concepts (HTML/CSS) and Drupal theming to understand how we translate visual ideas into browser interactions.

Outline

Animation is never just decoration, it is a critical UX tool that guides the user's eye and provides essential context.

In this session, we will explore how to purposefully apply motion to your Drupal projects:

  • The Principles: We will adapt core motion design concepts, such as timing, physics, and continuity, specifically for the web context.
  • The Application: How to identify the moments in a Drupal site (like menus, modals, and accordions) that benefit most from fluid interaction.
  • UX vs. Noise: How to distinguish between helpful feedback animations that solve problems and movement that distracts users.
  • The Implementation: How to actually build this. We will cover using CSS Custom Properties for consistent timing, and how to structure your Drupal theme so your motion code doesn't become a mess.
Learning Objectives

Apply Motion Theory: Move beyond standard CSS presets by understanding how timing, physics, and continuity create natural-feeling interactions.

Evaluate UX Impact: Learn to distinguish between functional motion that guides the user’s attention and decorative noise that distracts or slows them down.

Modernize Drupal Patterns: Identify specific opportunities within common Drupal components (like menus, modals, and accordions) to transform "clunky" transitions into fluid experiences.

Educational Track - Drupal in a Day Sponsors

Social Night Sponsors

In-Kind Sponsors

Media Partner Sponsors