Improved reference animations

Digitale-Lernwelten · May 21, 2024 · 1fd8139 · 1fd8139
1 parent c8d6a3c
commit 1fd8139
Showing 1 changed file with 6 additions and 2 deletions.
diff --git 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}