AnimatedContainer

A flex container that animates its children with a fade-in-up effect on mount.

Live Demo

Horizontal (Row)

Item 1

Item 2

Item 3

Vertical (Column) (and with sound on hover)

Item 1

Item 2 (no sound)

Item 3

Usage

Horizontal Layout (Default)

<template>
  <orio-animated-container>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </orio-animated-container>
</template>

Vertical Layout

<template>
  <orio-animated-container direction="column">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </orio-animated-container>
</template>

With Hover Sound

<template>
  <orio-animated-container v-slot="{ play }">
    <div @mouseenter="play">Item 1</div>
    <div @mouseenter="play">Item 2</div>
    <div @mouseenter="play">Item 3</div>
  </orio-animated-container>
</template>

Props

Prop	Type	Default	Description
direction	"row" | "column"	"row"	Layout direction of the container

Slots

Slot	Props	Description
default	{ play: Function }	Content to be animated

Notes

• All direct children animate with a fade-in-up effect (0.5s ease-out)
• Children translate from 30px below their final position
• Container uses flex-wrap: wrap for responsive layouts
• Default gap between items is 1rem