# Tile.CompleteAnimation

Canonical page: https://docs.ovok.com/native-sdk/guide/components/tile/complete-animation

Success animation overlay component that displays a celebratory animation when measurements are completed, providing positive user feedback and visual confirmation.

## Quick Example [#quick-example]

```tsx
import { Tile } from "@ovok/native";
import React from "react";

const CompleteAnimationExample = () => {
  const [showAnimation, setShowAnimation] = React.useState(true);

  const handleAnimationEnd = () => {
    console.log("Animation completed");
    setShowAnimation(false);
  };

  return (
    <Tile>
      <Tile.StartSection
        isCompleted={true}
        testID="measurement-start-section"
      />
      <Tile.Title testID="measurement-title">
        Blood Pressure Measurement
      </Tile.Title>
      {showAnimation && (
        <Tile.CompleteAnimation
          onAnimationEnd={handleAnimationEnd}
          testID="success-animation"
        />
      )}
    </Tile>
  );
};

export default CompleteAnimationExample;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/tile` API reference](/native-sdk/reference/tile).

## Component Behavior [#component-behavior]

The CompleteAnimation component:

1. **Overlay**: Positions absolutely over the entire tile content
2. **Entry Animation**: Fades in smoothly when displayed
3. **Success Icon**: Shows large green checkmark (TickCircle, 50px, Bold variant)
4. **Completion Text**: Displays "Completed" message below the icon
5. **Duration**: Runs for 3 seconds before triggering callback
6. **Exit Animation**: Fades out smoothly when removed
7. **Callback**: Executes `onAnimationEnd` when animation finishes

## Animation Timeline [#animation-timeline]

```
0ms     - Component mounts
0-300ms - FadeIn entrance animation
3000ms  - Animation duration completes
        - onAnimationEnd callback fired (if provided)
3000ms+ - FadeOut exit animation (when component unmounts)
```

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.colors.surface` - Background overlay color
- `theme.colors.success` - Checkmark icon color
- `theme.spacing(2)` - Gap between icon and text

## Related Components [#related-components]

- [Tile.MeasuringSpinner](/native-sdk/guide/components/tile/measuring-spinner/) - Loading state before completion
- [Tile.MeasuredValue](/native-sdk/guide/components/tile/measured-value/) - Result display after animation
- [Tile.Status](/native-sdk/guide/components/tile/status/) - Status updates throughout measurement process