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.

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