@gluonjs/core / src / LayoutTransition

Function: LayoutTransition()

LayoutTransition(props): TemplateValue

Animates direct-root geometry changes across renders through shared layout identity.

Parameters

props

LayoutTransitionProps

Returns

TemplateValue

Example

Animate one direct element root between measured render geometries while retaining shared layout identity and reduced-motion behavior:

import {
  KeepAlive,
  LayoutTransition,
  Suspense,
  Teleport,
  Transition,
  getBuiltinServerContract,
  html,
  type BuiltinServerContract,
  type KeepAliveProps,
  type LayoutTransitionProps,
  type SuspenseProps,
  type TeleportProps,
  type TransitionOptions,
  type TransitionProps,
} from '@gluonjs/core';

const suspenseProps = { source: Promise.resolve('Ready'), fallback: 'Loading…', children: (value: string) => value } satisfies SuspenseProps<string>;
const suspense = Suspense(suspenseProps);
const teleportProps = { to: '#bag-layer', children: html`<aside>Bag</aside>` } satisfies TeleportProps;
const teleport = Teleport(teleportProps);
const keepAliveProps = { cacheKey: '/shop', children: html`<main>Shop</main>`, max: 4 } satisfies KeepAliveProps;
const cached = KeepAlive(keepAliveProps);
const layoutProps = { layoutId: 'catalog-grid', transitionKey: 'Lighting', children: html`<section>Lighting</section>` } satisfies LayoutTransitionProps;
const layout = LayoutTransition(layoutProps);
const transitionOptions = { duration: 180, easing: 'ease-out', reducedMotion: 'system' } satisfies TransitionOptions;
const transitionProps = { ...transitionOptions, transitionKey: 'product', children: html`<article>Orbit Lamp</article>` } satisfies TransitionProps;
const transitioned = Transition(transitionProps);
const contracts: Array<BuiltinServerContract | undefined> = [suspense, teleport, cached, transitioned, layout].map(getBuiltinServerContract);
console.log(contracts);