Animation Specs: Enter, Exit, and Content Transitions

type AnimationSpec = {
  base: string;     // Tailwind transition utilities (transition-*, duration-[…ms], easing)
  from: string;     // CSS classes applied at the start of the animation
  to: string;       // CSS classes applied one frame later — the browser interpolates between them
  duration: number; // Milliseconds — used to time DOM removal after an exit animation
};

function fadeIn(duration?: number): AnimationSpec

function fadeOut(duration?: number): AnimationSpec

function scaleIn(duration?: number): AnimationSpec

function scaleOut(duration?: number): AnimationSpec

function slideIn(duration?: number, direction?: 'left' | 'right' | 'up' | 'down'): AnimationSpec

function slideOut(duration?: number, direction?: 'left' | 'right' | 'up' | 'down'): AnimationSpec

import type { AnimationSpec } from '@danielito1996/compose-svelted';

const popIn: AnimationSpec = {
  base: 'transition-all duration-[350ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]',
  from: 'opacity-0 scale-50',
  to: 'opacity-100 scale-100',
  duration: 350
};

const popOut: AnimationSpec = {
  base: 'transition-all duration-[200ms] ease-in',
  from: 'opacity-100 scale-100',
  to: 'opacity-0 scale-50',
  duration: 200
};

<AnimatedVisibility visible={show} enter={popIn} exit={popOut}>
  <MyComponent />
</AnimatedVisibility>

type ContentTransition = {
  enter: string;    // Inline CSS string applied when this state is the active one
  exit: string;     // Inline CSS string applied while this state is transitioning out
  duration: number; // Milliseconds — drives both the CSS `transition` property and the swap timer
};

transition: opacity ${duration}ms ease, transform ${duration}ms ease;

function fade(duration?: number): ContentTransition

// Produced object
{
  enter: 'opacity: 1;',
  exit:  'opacity: 0;',
  duration: 300
}

function scaleFade(): ContentTransition

// Produced object
{
  enter: 'transform: scale(1); opacity: 1;',
  exit:  'transform: scale(0.95); opacity: 0;',
  duration: 220
}

function slideHorizontal(): ContentTransition

// Produced object
{
  enter: 'transform: translateX(0); opacity: 1;',
  exit:  'transform: translateX(-100%); opacity: 0;',
  duration: 300
}

<script>
  import {
    AnimatedContent,
    fade,
    scaleFade,
    slideHorizontal
  } from '@danielito1996/compose-svelted';

  let tab = 'home';
</script>

<!-- Simple opacity crossfade with a custom duration -->
<AnimatedContent targetState={tab} transition={fade(400)}>
  {#if tab === 'home'}
    <HomeTab />
  {:else if tab === 'profile'}
    <ProfileTab />
  {/if}
</AnimatedContent>

<script>
  import {
    NavHost,
    scaleFade,
    slideHorizontal
  } from '@danielito1996/compose-svelted';
</script>

<!-- Scale + fade between screens -->
<NavHost transition={scaleFade()}>
  <!-- screen definitions -->
</NavHost>

<!-- Horizontal slide between screens -->
<NavHost transition={slideHorizontal()}>
  <!-- screen definitions -->
</NavHost>

import type { ContentTransition } from '@danielito1996/compose-svelted';

const flipVertical: ContentTransition = {
  enter: 'transform: rotateX(0deg); opacity: 1;',
  exit:  'transform: rotateX(90deg); opacity: 0;',
  duration: 350
};

<AnimatedContent targetState={currentStep} transition={flipVertical}>
  {#if currentStep === 1}
    <StepOne />
  {:else}
    <StepTwo />
  {/if}
</AnimatedContent>