Magic Classes and Scroll Animations

What it helps you do

Add spacing, layout tweaks, entrance motion, and scroll reveals by typing a class name on a block — no custom stylesheet required. Scroll animation classes give sections a polished feel as visitors move down the page.

Where to find it

  • Dirigible → Magic Classes — full reference grouped by category (Animations, Scroll Animations, Spacing, Flex, Mobile, and more).
  • Block editor — select a block, open Settings (sidebar) → Advanced → Additional CSS class(es).
  • Appearance → Customize → Site Settings → Animations — Load Animations and Scroll Animations toggles for site-wide motion.

How to use it

  1. Select the block you want to style.
  2. In the sidebar, expand Advanced and find Additional CSS class(es).
  3. Type one or more Magic Class names separated by spaces (for example, scroll-animate-from-bottom or mt-2 mb-4).
  4. Preview the page on the front end — scroll animations fire when the element enters the viewport.

Scroll animations (popular choices)

Class Effect
scroll-animate-pop-in Small rise with a springy scale — good default for cards
scroll-animate-from-bottom Slide up — general sections
scroll-animate-fade Opacity only — subtle reveal
scroll-animate-children Stagger animation across direct children (great for grids)

Combine with duration classes such as animate-2s or animate-5s when you want slower motion.

What happens automatically

  • Load animation classes (such as fade-in) run when the page loads if Load Animations is on.
  • Scroll classes run when the element scrolls into view if Scroll Animations is on.
  • Scroll animations respect prefers-reduced-motion, print mode, keyboard focus, and search crawlers — they stay off when motion should be reduced.
  • The Magic Classes reference page stays in sync with the theme’s built-in utility set.

Things to know

  • Scroll animation classes do nothing until Scroll Animations is enabled in the Customizer.
  • Too many animated blocks on one page can feel busy — start with section wrappers, not every paragraph.
  • scroll-animate-children applies to direct children only; add a 3-per-row (or similar) class on the parent when you want the stagger to reset each grid row.
  • Magic Classes are for layout and motion utilities — they do not replace block sidebar settings for colors, links, or typography.
  • Class names are exact — copy them from Dirigible → Magic Classes to avoid typos.

Related settings and guides