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.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

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

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

Props & Slots

Props

Prop name	Description	Type	Values	Default
direction	The direction of the animation @default "up" @values "up", "down", "left", "right"	union	-
delay	The delay of the animation @default 0	number	-
duration	The duration of the animation @default 2000	number	-
once	Play the animation only once @default true	boolean	-

Slots

Name	Description	Bindings
default