Reading Guide:
Motion with purpose
The best motion feels natural. Rather than competing for attention, it should reinforce hierarchy, guide the eye, and create a smooth reading experience.
That’s the philosophy behind motion in Suede. Instead of offering a long list of animation effects, Suede includes a small set of subtle transitions designed to complement your content. The goal isn’t to impress readers with movement—it’s to help them stay focused on what they’re reading.
When used with restraint, motion becomes another design tool. Like typography, spacing, and editorial patterns, it helps create rhythm, establish relationships between elements, and make each page feel more polished without ever becoming a distraction.
Available motion styles
Motion in Suede includes two subtle animation effects designed to enhance the reading experience without distracting from your content. Each serves a different purpose while remaining intentionally subtle.
Fade In
Fade In gently reveals an element in place, making it ideal for text, headings, and other content where the goal is a smooth transition where the goal is a smooth transition.
Fade In Up
Fade In Up combines a subtle fade with a slight upward movement, adding a greater sense of progression as elements enter the page. It’s particularly effective for images, cards, and section layouts where a touch of movement helps establish visual rhythm.
Like the motion styles themselves, the settings are intentionally simple. Rather than overwhelming with endless options, Suede provides the controls users need to create subtle, consistent animation throughout your site.
Motion settings
Once you’ve selected a motion style, Suede provides a small set of controls for fine-tuning how each animation behaves. The settings are intentionally focused, giving you enough flexibility to match the rhythm of your content without introducing unnecessary complexity.
Pattern
Definition
Effect
Choose between None, Fade In, or Fade In Up.
Duration
Control how long the animation takes to complete.
Delay
Add a delay before the animation begins.
Distance
Adjust the travel distance of the animation.
Motion in Suede is currently supported in four core WordPress blocks: Group, Columns, Column, and Image. As the motion system evolves, support may expand to additional blocks.
Built into Suede
Motion is one of many design decisions that shape the experience of a website. When used with restraint, it reinforces hierarchy, guides attention, and helps content feel more natural to read.
In Suede, motion works alongside editorial patterns, typography, and spacing to create polished WordPress sites without demanding attention. Like every design decision, it exists to support the content—not compete with it.
The best animation is the kind readers barely notice.