From 1fd8139148d92500376af32d80d00480152d35ed Mon Sep 17 00:00:00 2001
From: Benjamin Vincent Schulenburg
 <benjamin.schulenburg@institut-fuer-digitales-lernen.de>
Date: Tue, 21 May 2024 16:26:13 +0200
Subject: [PATCH] Improved reference animations

---
 src/components/Reference.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Reference.tsx b/src/components/Reference.tsx
index 56dac26..9c4cf9a 100644
--- a/src/components/Reference.tsx
+++ b/src/components/Reference.tsx
@@ -35,7 +35,11 @@ const Reference: React.FC<ReferenceProps> = (props) => {
 	const size = useWindowSize();
 	if(size.width && (size.width <= 900)){
 		variantsImage = variantEye;
-	} 
+	}
+
+	const imageTransition = (size.width && (size.width <= 900))
+		? ({ duration: 0.6, ease:'circInOut', type: "spring", bounce: 0.5 })
+		: ({ duration: 0.3, ease:'easeOut', type: "spring", bounce: 0.5 });
 
 	return (
 		<div className={odd ? `${css.wrap} ${css.odd}` : `${css.wrap} ${css.even}`}>
@@ -57,7 +61,7 @@ const Reference: React.FC<ReferenceProps> = (props) => {
 					initial="hidden"
 					whileInView="visible"
 					viewport={{ once: true }}
-					transition={{ duration: 0.6, ease:'circInOut', type: "spring", bounce: 0.5 }}
+					transition={imageTransition}
 					variants={variantsImage}
 					src={image.src}
 					width={image.width}