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>