Better Motion arrow canAnimate

barvian · Nov 23, 2024 · 433e74b · 433e74b
1 parent 27e405d
commit 433e74b
Showing 1 changed file with 30 additions and 30 deletions.
diff --git a/site/src/pages/[...framework]/examples/_Motion/react/Component.tsx b/site/src/pages/[...framework]/examples/_Motion/react/Component.tsx
@@ -1,4 +1,4 @@
-import { motion, MotionConfig, MotionContext } from 'motion/react'
+import { motion } from 'motion/react'
 import NumberFlow, { useCanAnimate } from '@number-flow/react'
 import { ArrowUp } from 'lucide-react'
 import clsx from 'clsx/lite'
@@ -15,35 +15,35 @@ export default function MotionExample({ value }: Props) {
 	const canAnimate = useCanAnimate()
 
 	return (
-		<MotionConfig reducedMotion="user">
-			<motion.span
-				className={clsx(
-					value > 0 ? 'bg-emerald-400' : 'bg-red-500',
-					'~text-base/2xl inline-flex items-center px-[0.3em] text-white transition-colors duration-300'
-				)}
-				style={{ borderRadius: 999 }}
+		<motion.span
+			className={clsx(
+				value > 0 ? 'bg-emerald-400' : 'bg-red-500',
+				'~text-base/2xl inline-flex items-center px-[0.3em] text-white transition-colors duration-300'
+			)}
+			style={{ borderRadius: 999 }}
+			layout={canAnimate}
+			transition={{ layout: { duration: 0.9, bounce: 0, type: 'spring' } }}
+		>
+			<MotionArrowUp
+				className="mr-0.5 size-[0.75em]"
+				absoluteStrokeWidth
+				strokeWidth={3}
+				layout={canAnimate} // undo parent
+				transition={{
+					rotate: canAnimate ? { type: 'spring', duration: 0.5, bounce: 0 } : { duration: 0 }
+				}}
+				animate={{ rotate: value > 0 ? 0 : -180 }}
+				initial={false}
+			/>
+			<MotionNumberFlow
+				value={value}
+				className="font-semibold"
+				format={{ style: 'percent', maximumFractionDigits: 2 }}
+				style={{ '--number-flow-char-height': '0.85em', '--number-flow-mask-height': '0.3em' }}
+				// Important, see note below:
 				layout={canAnimate}
-				transition={{ layout: { duration: 0.9, bounce: 0, type: 'spring' } }}
-			>
-				<MotionArrowUp
-					className="mr-0.5 size-[0.75em]"
-					absoluteStrokeWidth
-					strokeWidth={3}
-					layout={canAnimate} // undo parent
-					transition={{ rotate: { type: 'spring', duration: 0.5, bounce: 0 } }}
-					animate={{ rotate: value > 0 ? 0 : -180 }}
-					initial={false}
-				/>
-				<MotionNumberFlow
-					value={value}
-					className="font-semibold"
-					format={{ style: 'percent', maximumFractionDigits: 2 }}
-					style={{ '--number-flow-char-height': '0.85em', '--number-flow-mask-height': '0.3em' }}
-					// Important, see note below:
-					layout={canAnimate}
-					layoutRoot={canAnimate}
-				/>
-			</motion.span>
-		</MotionConfig>
+				layoutRoot={canAnimate}
+			/>
+		</motion.span>
 	)
 }