---
title: "MazAnimatedElement"
description: "MazAnimatedElement is a standalone component that animates its content with a sliding blur effect when it enters the viewport. It supports different animation directions (up, down, left, right) and allows customizing the animation delay and duration."
package: "maz-ui"
url: "https://maz-ui.com/components/maz-animated-element"
---

# MazAnimatedElement

> MazAnimatedElement is a standalone component that animates its content with a sliding blur effect when it enters the viewport. It supports different animation directions (up, down, left, right) and allows customizing the animation delay and duration.

- Package: `maz-ui`
- Import: `import MazAnimatedElement from 'maz-ui/components/MazAnimatedElement'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-animated-element

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

**Tip:**

This component is SSR friendly: its content is in the server markup and the animation is pure CSS, so it starts on the first paint when the element is in the viewport, without waiting for JavaScript. Below the viewport, it plays when the element enters it. With `prefers-reduced-motion: reduce`, the content is displayed without animation.

```vue
<script lang="ts" setup>
import MazAnimatedElement from 'maz-ui/components/MazAnimatedElement'
</script>

<template>
  <MazAnimatedElement direction="up" :delay="1000" :duration="2000">
    <MazAvatar src="https://github.com/LouisMazel.png" size="lg" />
  </MazAnimatedElement>
</template>
```

## MazAnimatedElement API

`import MazAnimatedElement from 'maz-ui/components/MazAnimatedElement'`

### Props

- `direction` (`"up" | "down" | "left" | "right"`, default: `"up"`): The direction of the animation.
- `delay` (`number`, default: `0`): The delay of the animation.
- `duration` (`number`, default: `2000`): The duration of the animation.
- `once` (`boolean`, default: `true`): Play the animation only once.

### Slots

- `#default`