Animation

Wrap the content you want to animate in {{#> Animation}} … {{/Animation}}

The partial gives you a reactive show value. Every element that should animate opts in with two things:

1. x-show="show": ties the element's visibility to the animation.

2. x-transition:enter* classes: describe the motion (the "before" and "after" states).

Elements without x-show="show" render normally, with no animation. So you can animate just the parts you want and leave the rest static.

The three transition attributes:

• x-transition:enter sets the timing: easing and duration (e.g. transition ease-out duration-1000).

• x-transition:enter-start is the before state: how the element looks at the start (e.g. opacity-0 translate-y-4).

• x-transition:enter-end is the after state: where it lands (e.g. opacity-100 translate-y-0).

To reveal a sequence (headline, then subhead, then button) give everything the sameshowstate but add a Tailwind delay-* class to each element'sentertiming:

Each staggered element starts later than the one before. Good stagger steps: delay-100, delay-200, delay-300, delay-500, delay-700. For a 1000ms entrance, ~200ms steps feel snappy without overlapping awkwardly.

Mix and match these enter-start → enter-end pairs to build any common entrance. Pair them with a timing class like x-transition:enter="transition ease-out duration-1000".

The Animation wrapper is invisible to layout, so you can wrap any subset of a block's content. A common shape is a Section (your block's outer wrapper) containing one or more Animation regions:

Animations are designed to stay out of your way while you work. In the page editor and block chat, content shows in its final, animated-in state immediately, no replaying every time you type. Use the play button in the lower right corner of the preview to play animations as you create them. On deployed sites animations will play on load and scroll enter.

Add x-show="show" to every element you want to animate. The partial provides the state, but it doesn't bind your elements for you. An element without x-show just renders normally.

Don't nest Animation partials. Two nested wrappers fight over the same show state and the inner one usually won't play. Use sibling Animation blocks side by side instead.

Use standard Tailwind classes, not arbitrary values. opacity-0, translate-y-4, scale-95, blur-md, delay-200, yes. translate-y-[37px], avoid.

Animation is one-shot. It plays the entrance once. For motion that tracks scrolling continuously, or for click-to-open accordions, this partial isn't the tool.

Scroll fires at 15% visibility. With trigger="scroll", the animation plays as soon as ~15% of the wrapper has entered the viewport, not when it's fully on screen. That's usually what you want (the motion is already underway as the section arrives), but it's the answer to "why did it fire so early?"

The wrapper doesn't affect layout. The partial renders as a display: contents element, so it generates no box of its own. Its children behave as if they're direct children of whatever surrounds the partial. Inside a flex or grid Section, the animated elements become flex/grid items directly. This is why a positioning context (relative) belongs on an inner element, not on the Animation wrapper, see the video-background example above, where relative z-1 sits on the inner div.

• Hover effects (a button glow, an image zoom on hover) → use CSS transition-* classes with Tailwind's hover: variants. No Animation partial needed.

• Continuous loops (a pulsing dot, an infinite marquee) → use Tailwind's animate-* utilities like animate-pulse and animate-spin, or custom CSS @keyframes.

• Click-triggered reveals (accordions, expanding cards) → write a small Alpine toggle inline (x-data="{ open: false }"). See Template Interactivity.