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.

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

Basic usage

<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>

Props

Name	Description	Type	Required	Default	Possible values
direction	The direction of the animation	"up" | "down" | "left" | "right"	No	up	up", "down", "left", "right
delay	The delay of the animation	number	No	0	-
duration	The duration of the animation	number	No	2000	-
once	Play the animation only once	boolean	No	true	-

Slots

Name	Description	Bindings
default