Overview

animatedIf(condition, trueTemplate, falseTemplate?, config?) swaps between two templates with Web Animations API enter/exit presets. Prefer it over bare cond ? tpl : nothing when you want the leaving content to finish animating before removal.

animatedX(component, props, config) is a thin wrapper: when config.show is true it renders the component with x(); when false it animates out to nothing. Same enter/exit presets as animatedIf.

Defaults when omitted: enter is animationPresets.fadeIn(250), exit is animationPresets.fadeOut(200).

animatedIf vs animatedX vs ternary

API
Renders
Notes
cond ? a : b Instant swap No animation — content mounts/unmounts immediately.
animatedIf(cond, a, b?, cfg?) Animated templates True/false templates (or nothing). Plays exit then enter via animateSwap.
animatedX(Comp, props, cfg) Animated component Requires cfg.show. Internally calls animatedIf with x(Component, props) as the true template.

Fade in / fade out

animatedIf accepts a boolean condition, a true-template, an optional false-template, and an optional config with enter/exit animation presets. The element animates in when the condition becomes true and animates out before it is removed.

import { html, atom, animatedIf, animationPresets, nothing, renderApp } from 'mates';

const App = () => {
const show = atom(true);
return () => html`
<div class="m-col m-gap m-items-center">
<button @click=${() => show.set(v => !v)}>
${show() ? 'Hide' : 'Show'} content
</button>
${animatedIf(show(),
html`<div class="card card-body center">
<h1>👋 Hello!</h1>
<p>This fades in/out with animatedIf</p>
</div>`,
nothing,
{ enter: animationPresets.fadeIn(300), exit: animationPresets.fadeOut(200) }
)}
</div>
`;
};
renderApp(App, document.getElementById('app'));

animatedX for a component

animatedX(Component, props, { show, enter, exit }) renders the component with x() when show is true and animates out to nothing when false.

import { html, atom, animatedX, animationPresets, renderApp } from 'mates';

const Panel = (propsFn) => () => html`
<div class="card card-body center">
<strong>${propsFn().title}</strong>
</div>
`;

const App = () => {
const open = atom(true);
return () => html`
<div class="m-col m-gap m-items-center">
<button @click=${() => open.set(v => !v)}>
${open() ? 'Hide' : 'Show'} panel
</button>
${animatedX(Panel, { title: 'animatedX' }, {
show: open(),
enter: animationPresets.slideIn('up', '12px', 280),
exit: animationPresets.fadeOut(180),
})}
</div>
`;
};
renderApp(App, document.getElementById('app'));