Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/danielitoCode/compose_svelted/llms.txt

Use this file to discover all available pages before exploring further.

AnimatedVisibility shows or hides its slotted content based on a visible boolean. Rather than abruptly mounting and unmounting the DOM node, it applies CSS class-based animations on the way in and on the way out, keeping transitions smooth and predictable. The animation behaviour on each side is fully controlled by an AnimationSpec value, so you can mix and match enter and exit styles freely.

​
Props

​
visible
boolean
required
When true the content is rendered and the enter animation runs. When switched to false the exit animation plays and the element is removed from the DOM only after the animation completes.
​
enter
AnimationSpec
default:"fadeIn()"
The animation spec applied when the content becomes visible. Defaults to a 280 ms opacity fade-in.
​
exit
AnimationSpec
default:"fadeOut()"
The animation spec applied when the content is hidden. Defaults to a 220 ms opacity fade-out. The DOM node is removed after exit.duration milliseconds.

​
How it works

Internally, AnimatedVisibility keeps a shouldRender flag that tracks whether the DOM node is currently alive. When visible flips to true, shouldRender becomes true immediately and the enter animation starts on the next animation frame. When visible flips to false, the exit animation runs first; a setTimeout set to exit.duration flips shouldRender back to false only after the transition finishes. Each AnimationSpec carries three Tailwind CSS class strings and a duration in milliseconds:
FieldPurpose
baseTransition utilities — transition-*, duration-[…ms], easing
fromInitial CSS classes applied at the start of the animation
toTarget CSS classes — the browser interpolates between from and to
durationNumber of milliseconds; used to time DOM removal on exit

​
Available AnimationSpec factory functions

All factory functions are exported from @danielito1996/compose-svelted. Each accepts an optional duration parameter in milliseconds.

fadeIn(duration?)

Opacity 0 → 1. Default duration 280 ms, easing ease-out.

fadeOut(duration?)

Opacity 1 → 0. Default duration 220 ms, easing ease-in.

scaleIn(duration?)

Scale 0.95 → 1 combined with opacity 0 → 1. Default 280 ms, ease-out.

scaleOut(duration?)

Scale 1 → 0.95 combined with opacity 1 → 0. Default 220 ms, ease-in.

slideIn(duration?, direction?)

Translates from an offset back to 0 while fading in. Default 280 ms, direction "right". Direction options: "left", "right", "up", "down".

slideOut(duration?, direction?)

Translates away from origin while fading out. Default 220 ms, direction "right". Direction options: "left", "right", "up", "down".

​
Examples

​
Toggle with default fade

<script>
  import { AnimatedVisibility } from '@danielito1996/compose-svelted';

  let show = false;
</script>

<button onclick={() => show = !show}>Toggle</button>

<AnimatedVisibility visible={show}>
  <p>Hello!</p>
</AnimatedVisibility>

​
Mixed enter / exit animations

<script>
  import {
    AnimatedVisibility,
    fadeIn,
    scaleOut
  } from '@danielito1996/compose-svelted';

  let show = false;
</script>

<button onclick={() => show = !show}>Toggle</button>

<AnimatedVisibility visible={show} enter={fadeIn()} exit={scaleOut()}>
  <Text>Hello!</Text>
</AnimatedVisibility>

​
Slide in from the left, slide out upward

<script>
  import {
    AnimatedVisibility,
    slideIn,
    slideOut
  } from '@danielito1996/compose-svelted';

  let open = false;
</script>

<button onclick={() => open = !open}>Open panel</button>

<AnimatedVisibility
  visible={open}
  enter={slideIn(300, 'left')}
  exit={slideOut(220, 'up')}
>
  <div class="panel">Panel content</div>
</AnimatedVisibility>

​
Custom durations

<script>
  import {
    AnimatedVisibility,
    scaleIn,
    scaleOut
  } from '@danielito1996/compose-svelted';

  let active = false;
</script>

<button onclick={() => active = !active}>Activate</button>

<AnimatedVisibility
  visible={active}
  enter={scaleIn(400)}
  exit={scaleOut(300)}
>
  <Card>This card scales in and out.</Card>
</AnimatedVisibility>

​
Driven by a CheckButton (real-world pattern)

<script>
  import {
    AnimatedVisibility,
    CheckButton,
    Column,
    Card,
    Text,
    TextStyle,
    Arrangement,
    Modifier,
    fadeIn,
    fadeOut
  } from '@danielito1996/compose-svelted';

  let enabled = false;
</script>

<Column verticalArrangement={Arrangement.spacedBy(16)} modifier={Modifier.padding(24)}>
  <CheckButton
    checked={enabled}
    onCheckedChange={v => enabled = v}
    modifier={Modifier.fillMaxWidth()}
  >
    <Text>Show advanced options</Text>
  </CheckButton>

  <AnimatedVisibility visible={enabled} enter={fadeIn()} exit={fadeOut()}>
    <Card elevation={4} modifier={Modifier.fillMaxWidth()}>
      <Column
        verticalArrangement={Arrangement.spacedBy(8)}
        modifier={Modifier.padding(16)}
      >
        <Text textStyle={TextStyle.TitleMedium}>Advanced options</Text>
        <Text textStyle={TextStyle.BodyMedium}>
          This content appears and disappears using AnimatedVisibility,
          controlled by the CheckButton state.
        </Text>
      </Column>
    </Card>
  </AnimatedVisibility>
</Column>
The exit duration determines when the DOM node is removed. If you pass a very short exit duration, the browser may not complete the CSS transition before the element disappears. Always keep exit.duration equal to or slightly longer than the CSS transition you intend.

Build docs developers (and LLMs) love

Get started for freeTalk to us