Something went wrong. Try again.
My personal website
Something went wrong. Try again.
734 B · 28 lines
Astro
at astro
1234567891011121314151617181920212223242526272829---import type { TransitionAnimationPair, TransitionDirectionalAnimations } from "astro";
const transition: TransitionAnimationPair = { old: { name: "slide-left-out", duration: "0.4s", easing: "cubic-bezier(.06,.71,.55,1)", }, new: { name: "slide-left-in", duration: "0.35s", easing: "cubic-bezier(.21,1.02,.73,1)", }}
const animation: TransitionDirectionalAnimations = { forwards: transition, backwards: transition,};
---<div 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" transition:animate={animation}> <slot /></div>