scrumplex.net
My personal website
1---
2import type { TransitionAnimationPair, TransitionDirectionalAnimations } from "astro";
3
4const transition: TransitionAnimationPair = {
5 old: {
6 name: "slide-left-out",
7 duration: "0.4s",
8 easing: "cubic-bezier(.06,.71,.55,1)",
9 },
10 new: {
11 name: "slide-left-in",
12 duration: "0.35s",
13 easing: "cubic-bezier(.21,1.02,.73,1)",
14 }
15}
16
17const animation: TransitionDirectionalAnimations = {
18 forwards: transition,
19 backwards: transition,
20};
21
22---
23<div
24 class="sm:flat-shadow my-4 h-min bg-neutral-50 p-6 pb-2 shadow-black max-sm:shadow sm:rounded-tl-3xl dark:bg-neutral-900 bg-wave-pattern dark:bg-wave-dark-pattern bg-cover bg-center bg-repeat-x animate-float"
25 transition:animate={animation}
26>
27 <slot />
28</div>