> ## Documentation Index
> Fetch the complete documentation index at: https://starrycodes.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget - Fade & Move Animations

> Declarative, chainable animations for widgets. Instantly apply smooth fade, slide, and bounce entrance effects using simple method calls.

{/*     title="⚡ Quick Usage" */}

{/* > */}

{/* // Simple Fade Entrance */}

{/* // Combined Entrance (Fade + Slide Up) */}

{/* // Continuous Loop */}

{/* ``` */}

<Steps titleSize="h3">
  <Step title="👻 Basic Fade Effects">
    {/*  FadeIn */}

    <ResponseField name="fadeIn" type="Widget">
      Applies a simple opacity fade-in animation from transparent to opaque.

      <Expandable title="Parameters">
        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in milliseconds).
        </ParamField>

        <ParamField body="begin" type="double" default="0.0">
          The initial opacity value (`0.0` = transparent)
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating (fade in, then fade out).
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="curve" type="Curve?" default="Curves.easeIn">
          The `curve` to use for the animation speed.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      Text("Hello").fadeIn(duration: 800);
      ```
    </ResponseField>

    {/*  fade Out */}

    <ResponseField name="fadeOut" type="Widget">
      Applies a simple opacity fade-out animation from opaque to transparent.

      <Expandable title="Parameters">
        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in milliseconds).
        </ParamField>

        <ParamField body="begin" type="double" default="1.0">
          The initial opacity value (`1.0` = opaque).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating (fade out, then fade in).
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="curve" type="Curve?" default="Curves.easeIn">
          The `curve` to use for the animation speed.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      // Fade out over 1 second
      Widget().fadeOut(duration: 1000);
      ```
    </ResponseField>
  </Step>

  <Step title="⬇️ Vertical Entrance (Move Y)">
    {/*  -------------------- */}

    <ResponseField name="fadeInMoveInBottom" type="Widget">
      Combined fade-in and slide-up entrance. The widget moves up from the bottom edge by `verticalOffset` pixels.

      <Expandable title="Parameters">
        <ParamField body="verticalOffset" type="double" default="50">
          The starting distance (in pixels) the widget moves up from.
        </ParamField>

        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating.
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="curve" type="Curve?" default="Curves.ease">
          The `curve` to use for the animation speed.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      const Card().fadeInMoveInBottom(verticalOffset: 100);
      ```
    </ResponseField>

    {/*  ----------------- */}

    <ResponseField name="fadeInMoveInBottomBouncy" type="Widget">
      Slide-up entrance with a quick, light overshoot and settlement (a light bounce).

      <Expandable title="Parameters">
        <ParamField body="verticalOffset" type="double" default="50">
          The starting distance (in pixels) the widget moves up from.
        </ParamField>

        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating.
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      Text("Bouncy").fadeInMoveInBottomBouncy();
      ```
    </ResponseField>

    {/*  -------------- */}

    <ResponseField name="fadeInMoveInBottomStickyBouncy" type="Widget">
      Slide-up entrance with a strong, oscillating bounce using `Curves.elasticOut`.

      <Expandable title="Parameters">
        <ParamField body="verticalOffset" type="double" default="50">
          The starting distance (in pixels) the widget moves up from.
        </ParamField>

        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating.
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      Image.asset("path/to/logo").fadeInMoveInBottomStickyBouncy();
      ```
    </ResponseField>

    {/*  fade Out */}

    <ResponseField name="fadeInMoveInTop({double verticalOffset, ...})" type="Widget">
      Combined fade-in and slide-down entrance. The widget moves down from the top edge by `verticalOffset` pixels.

      <Expandable title="Parameters">
        <ParamField body="verticalOffset" type="double" default="50">
          The starting distance (in pixels) the widget moves down from.
        </ParamField>

        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating.
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="curve" type="Curve?" default="Curves.ease">
          The `curve` to use for the animation speed.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      const AppBar().fadeInMoveInTop();
      ```
    </ResponseField>

    {/*  -------------- */}

    <ResponseField name="fadeInMoveInTopBouncy" type="Widget">
      Slide-down entrance with a quick, light overshoot and settlement (a light bounce).

      <Expandable title="Parameters">
        <ParamField body="verticalOffset" type="double" default="50">
          The starting distance (in pixels) the widget moves down from.
        </ParamField>

        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating.
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      Text("Title").fadeInMoveInTopBouncy();
      ```
    </ResponseField>

    {/*  ------------------ */}

    <ResponseField name="fadeInMoveInTopStickyBouncy" type="Widget">
      Slide-down entrance with a strong, oscillating bounce using `Curves.elasticOut`.

      <Expandable title="Parameters">
        <ParamField body="verticalOffset" type="double" default="50">
          The starting distance (in pixels) the widget moves down from.
        </ParamField>

        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating.
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      Image.network(url).fadeInMoveInTopStickyBouncy();
      ```
    </ResponseField>
  </Step>

  <Step title="➡️ Horizontal Entrance (Move X)">
    {/*  ------------------------- */}

    <ResponseField name="fadeInMoveInLeft" type="Widget">
      Combined fade-in and slide-in entrance from the left edge.

      <Expandable title="Parameters">
        <ParamField body="horizontalOffset" type="double" default="50">
          The starting distance (in pixels) the widget moves from the left.
        </ParamField>

        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating.
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="curve" type="Curve?" default="Curves.ease">
          The `curve` to use for the animation speed.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      const Text("Menu").fadeInMoveInLeft();
      ```
    </ResponseField>

    {/*  ------------------------- */}

    <ResponseField name="fadeInMoveInLeftBouncy" type="Widget">
      Slide-in from the left with a quick, light overshoot and settlement.

      <Expandable title="Parameters">
        <ParamField body="horizontalOffset" type="double" default="50">
          The starting distance (in pixels) the widget moves from the left.
        </ParamField>

        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating.
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      const Text("Menu").fadeInMoveInLeftBouncy();
      ```
    </ResponseField>

    {/*  ------------------------- */}

    <ResponseField name="fadeInMoveInLeftStickyBouncy" type="Widget">
      Slide-in from the left with a strong, oscillating bounce using `Curves.elasticOut`.

      <Expandable title="Parameters">
        <ParamField body="horizontalOffset" type="double" default="50">
          The starting distance (in pixels) the widget moves from the left.
        </ParamField>

        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating.
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      const Text("Menu").fadeInMoveInLeftStickyBouncy();
      ```
    </ResponseField>

    {/*  ------------------------- */}

    <ResponseField name="fadeInMoveInRight" type="Widget">
      Combined fade-in and slide-in entrance from the right edge.

      <Expandable title="Parameters">
        <ParamField body="horizontalOffset" type="double" default="50">
          The starting distance (in pixels) the widget moves from the right.
        </ParamField>

        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating.
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="curve" type="Curve?" default="Curves.ease">
          The `curve` to use for the animation speed.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      const Icon(Icons.close).fadeInMoveInRight();
      ```
    </ResponseField>

    {/*  ------------------------- */}

    <ResponseField name="fadeInMoveInRightBouncy" type="Widget">
      Slide-in from the right with a quick, light overshoot and settlement.

      <Expandable title="Parameters">
        <ParamField body="horizontalOffset" type="double" default="50">
          The starting distance (in pixels) the widget moves from the right.
        </ParamField>

        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating.
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      const Icon(Icons.close).fadeInMoveInRightBouncy();
      ```
    </ResponseField>

    {/*  ------------------------- */}

    <ResponseField name="fadeInMoveInRightStickyBouncy" type="Widget">
      Slide-in from the right with a strong, oscillating bounce using `Curves.elasticOut`.

      <Expandable title="Parameters">
        <ParamField body="horizontalOffset" type="double" default="50">
          The starting distance (in pixels) the widget moves from the right.
        </ParamField>

        <ParamField body="delay" type="int" default="0">
          The `duration` to wait before starting the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="duration" type="int" default="500">
          The length of the animation (in `milliseconds`).
        </ParamField>

        <ParamField body="repeat" type="bool" default="false">
          If `true`, the animation loops indefinitely.
        </ParamField>

        <ParamField body="reverse" type="bool" default="false">
          If `true`, reverses direction when repeating.
        </ParamField>

        <ParamField body="autoPlay" type="bool" default="true">
          If `true`, the animation starts automatically.
        </ParamField>

        <ParamField body="onInit" type="void Function(AnimationController)?" default="null">
          A callback fired when the `AnimationController` is initialized.
        </ParamField>
      </Expandable>

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      const Image().fadeInMoveInRightStickyBouncy();
      ```
    </ResponseField>
  </Step>
</Steps>