feature: add scroll driven animations

Also removes scroll snap.

Author: hozlucas28

src/components/header-skeleton.astro

@@ -1,9 +1,17 @@
 <header
-	class='fixed z-10 w-full animate-pulse px-2.5 pt-2'
+	class='animate-pulse'
 	aria-label='Cargando encabezado'
 >
 	<span
-		class='bg-muted mx-auto block h-12 w-full max-w-7xl rounded-xl px-4 [--navbar-height:3.5rem] md:h-(--navbar-height) 2xl:max-w-(--breakpoint-2xl)'
+		class='fixed z-10 w-full [animation:remove-padding_linear_both] px-2.5 pt-2 [animation-range:0_32px] [animation-timeline:scroll()] xl:animate-none'
 		aria-hidden='true'
-	></span>
+	>
+		<span
+			class='bg-muted relative mx-auto block h-12 w-full max-w-7xl [animation:remove-border_linear_both] rounded-xl px-4 [--navbar-height:3.5rem] [animation-range:0_32px] [animation-timeline:scroll()] md:h-(--navbar-height) xl:animate-none 2xl:max-w-(--breakpoint-2xl)'
+		>
+			<span
+				class='absolute inset-0 -z-10 mx-auto h-[calc(var(--navbar-height)+0.5rem)] w-full max-w-[calc(var(--container-7xl)+0.5rem)] [animation:fade-in_linear_both] rounded-xl bg-neutral-800 blur-xl [--navbar-height:3.5rem] [animation-range:0_32px] [animation-timeline:scroll()] md:h-[calc(var(--navbar-height)+1rem)] md:max-w-[calc(var(--container-7xl)+1rem)] 2xl:max-w-(--breakpoint-2xl)'
+			></span>
+		</span>
+	</span>
 </header>

src/components/header.tsx

@@ -145,7 +145,7 @@ function Header({ avatar, currentPage, DesktopBrand, MobileBrand }: HeaderProps)
 	return (
 		<>
 			<Navbar
-				className='fixed z-10 *:transition-colors *:ease-in-out'
+				className='fixed z-10 [animation:remove-padding_linear_both] [animation-range:0_32px] [animation-timeline:scroll()] *:transition-colors *:ease-in-out xl:animate-none'
 				style={{
 					paddingRight: Object.values(underlays).some((bool) => bool)
 						? `calc(var(--spacing) * 2.5 + ${scrollbarWidth}px)`
@@ -155,7 +155,7 @@ function Header({ avatar, currentPage, DesktopBrand, MobileBrand }: HeaderProps)
 				isOpen={underlays.sideNavbar}
 				onOpenChange={(isOpen) => underlaysStore.setKey('sideNavbar', isOpen)}
 			>
-				<Navbar.Nav>
+				<Navbar.Nav className='[animation:remove-border_linear_both] [animation-range:0_32px] [animation-timeline:scroll()] xl:animate-none'>
 					<Navbar.Section className='h-full min-h-fit'>
 						{/* Desktop and mobile */}
 						<Navbar.Logo
@@ -274,7 +274,7 @@ function Header({ avatar, currentPage, DesktopBrand, MobileBrand }: HeaderProps)
 				</Navbar.Nav>
 
 				{/* Only for mobile */}
-				<Navbar.Compact>
+				<Navbar.Compact className='[animation:remove-border_linear_both] [animation-range:0_32px] [animation-timeline:scroll()] xl:animate-none'>
 					<Navbar.Logo
 						className='p-0'
 						{...navbarLogoProps}
@@ -293,7 +293,7 @@ function Header({ avatar, currentPage, DesktopBrand, MobileBrand }: HeaderProps)
 				</Navbar.Compact>
 
 				{/* Backdrop */}
-				<span className='absolute inset-0 -z-10 mx-auto h-[calc(var(--navbar-height)+0.5rem)] w-full max-w-[calc(var(--container-7xl)+0.5rem)] rounded-xl bg-neutral-800 blur-xl [--navbar-height:3.5rem] md:h-[calc(var(--navbar-height)+1rem)] md:max-w-[calc(var(--container-7xl)+1rem)] 2xl:max-w-(--breakpoint-2xl)' />
+				<span className='absolute inset-0 -z-10 mx-auto h-[calc(var(--navbar-height)+0.5rem)] w-full max-w-[calc(var(--container-7xl)+0.5rem)] [animation:fade-in_linear_both] rounded-xl bg-neutral-800 blur-xl [--navbar-height:3.5rem] [animation-range:0_32px] [animation-timeline:scroll()] md:h-[calc(var(--navbar-height)+1rem)] md:max-w-[calc(var(--container-7xl)+1rem)] 2xl:max-w-(--breakpoint-2xl)' />
 			</Navbar>
 
 			{/* Only for "md" breakpoint */}

src/layouts/index.astro

@@ -26,15 +26,7 @@ const avatar: AvatarProps = {
 	description={BRAND.description}
 	keywords='películas, ver películas, películas online, películas en línea, películas completas, películas en streaming, series, ver series, series online, series en línea, series completas, series en streaming, lucas hoz, hoz lucas, lucashoz, hozlucas, hozlucas28'
 	pageURL={pageURL}
-	classes={{
-		html: 'snap-y snap-mandatory',
-		body: {
-			main: {
-				wrapper:
-					'[:is(&_astro-island)]:*:snap-center [:not(&_astro-island)]:snap-center [:is(&_astro-island)]:*:scroll-my-12 [:not(&_astro-island)]:scroll-my-12',
-			},
-		},
-	}}
+	classes={{ html: 'scroll-smooth' }}
 >
 	<Header
 		{avatar}

src/styles/globals.css

@@ -62,18 +62,32 @@
 
 	@keyframes fade-in {
 		0% {
-			opacity: 0;
+			opacity: 0%;
 		}
 
 		100% {
-			opacity: 1;
+			opacity: 100%;
 		}
 	}
 
 	@keyframes fade-out {
 		100% {
 			display: none;
-			opacity: 0;
+			opacity: 100%;
+		}
+	}
+
+	@keyframes remove-border {
+		100% {
+			border-radius: 0px;
+			border-style: none;
+			border-width: 0px;
+		}
+	}
+
+	@keyframes remove-padding {
+		100% {
+			padding: 0px;
 		}
 	}
 }