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

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.

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