add more transitions

petar-i-todorov · Jan 7, 2024 · e686b22 · e686b22
1 parent 81df4a2
commit e686b22
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 30 deletions.
diff --git a/app/components/blurrable-image.tsx b/app/components/blurrable-image.tsx
@@ -1,6 +1,18 @@
 import clsx from 'clsx'
 import React from 'react'
 
+function getWidthAndHeight(tailwindClasses: string) {
+	return tailwindClasses
+		.split(' ')
+		.filter(
+			className =>
+				className.includes('w-') ||
+				className.includes('h-') ||
+				className.includes('aspect-'),
+		)
+		.join(' ')
+}
+
 export const BlurrableImage = ({
 	dataUrl,
 	src,
@@ -30,32 +42,28 @@ export const BlurrableImage = ({
 	}, [])
 
 	return (
-		<>
+		<div className={clsx(getWidthAndHeight(props.className ?? ''), 'relative')}>
 			{/* it gets the alt from the props */}
 			{/* eslint-disable-next-line jsx-a11y/alt-text */}
 			<img
 				{...props}
-				src={src}
-				className={clsx(
-					{
-						hidden: !isLoaded,
-					},
-					props.className,
-				)}
-				ref={imageRef}
+				src={`data:image/webp;base64,${dataUrl}`}
+				className={clsx(props.className, 'absolute inset-0 z-0')}
 			/>
 			{/* it gets the alt from the props */}
 			{/* eslint-disable-next-line jsx-a11y/alt-text */}
 			<img
 				{...props}
-				src={`data:image/webp;base64,${dataUrl}`}
+				src={src}
 				className={clsx(
 					{
-						hidden: isLoaded,
+						hidden: !isLoaded,
 					},
 					props.className,
+					'animate-fade-in relative z-[1]',
 				)}
+				ref={imageRef}
 			/>
-		</>
+		</div>
 	)
 }
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -224,7 +224,7 @@ export default function Index() {
 								classNamesThemeToggleDelay,
 							)}
 						>
-							FEATURED STORIES
+							<div className="w-fit">FEATURED STORIES</div>
 						</h2>
 						<hr className="h-[3px] border-0 bg-gray-400" />
 						{featuredPosts.length > 0
@@ -248,7 +248,7 @@ export default function Index() {
 											className={clsx(
 												'flex flex-col justify-center',
 												index !== featuredPosts.length - 1 &&
-													'relative after:absolute after:top-[calc(100%+7px)] after:h-[1px] after:w-[calc(100%-20px)] after:bg-gray-400 after:content-[""]',
+													`relative after:absolute after:top-[calc(100%+7px)] after:block after:h-[1px] after:w-[calc(100%-20px)] after:bg-gray-400 after:content-[""]`,
 											)}
 										>
 											<CustomLink to={`/articles/${post.category.slug}`}>

diff --git a/app/routes/articles_.$categorySlug_.$postSlug.tsx b/app/routes/articles_.$categorySlug_.$postSlug.tsx
@@ -329,7 +329,7 @@ export default function PostRoute() {
 					onDismiss={onDismiss}
 					className="fixed inset-0 flex h-full w-full items-center justify-center bg-[hsla(0,0%,100%,0.8)]"
 				>
-					<DialogContent className="motion-safe:animate-show-in flex h-[370px] w-[250px] flex-col items-center justify-between gap-4 border-2 border-solid border-gray-50 bg-black p-6 text-gray-50">
+					<DialogContent className="motion-safe:animate-fade-in-scale-up flex h-[370px] w-[250px] flex-col items-center justify-between gap-4 border-2 border-solid border-gray-50 bg-black p-6 text-gray-50">
 						<button className="self-end" onClick={() => setIsOpen(false)}>
 							<Icon name="cross-1" className="h-6 w-6" fill="white" />
 						</button>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,6 +3,41 @@ export default {
 	content: ['./app/**/*.{js,jsx,ts,tsx}'],
 	theme: {
 		extend: {
+			animation: {
+				'fade-in-scale-up': 'fade-in-scale-up 0.5s ease-in-out',
+				'slide-in-from-right': 'slide-in-from-right 0.25s ease-out',
+				'fade-in': 'fade-in 0.5s ease-in-out',
+			},
+			keyframes: {
+				'fade-in-scale-up': {
+					from: {
+						opacity: 0,
+						transform: 'scale(0)',
+					},
+					to: {
+						opacity: 1,
+						transform: 'scale(1)',
+					},
+				},
+				'slide-in-from-right': {
+					from: {
+						opacity: 0,
+						transform: 'translateX(100%)',
+					},
+					to: {
+						opacity: 1,
+						transform: 'translateX(0)',
+					},
+				},
+				'fade-in': {
+					'0%': {
+						opacity: '0',
+					},
+					'100%': {
+						opacity: '1',
+					},
+				},
+			},
 			colors: {
 				background: {
 					DEFAULT: 'hsl(var(--background-light))',
@@ -57,21 +92,6 @@ export default {
 		fontFamily: {
 			oswald: ['Oswald', 'Oswald Fallback'],
 		},
-		animation: {
-			'show-in': 'show-in 0.5s ease-in-out',
-		},
-		keyframes: {
-			'show-in': {
-				from: {
-					opacity: 0,
-					transform: 'scale(0)',
-				},
-				to: {
-					opacity: 1,
-					transform: 'scale(1)',
-				},
-			},
-		},
 	},
 	plugins: [],
 	darkMode: 'class',