💫 add question transition

h-campos · Apr 27, 2023 · 82d181d · 82d181d
1 parent 08ef5ef
commit 82d181d
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/components/Question/Question.tsx b/src/components/Question/Question.tsx
@@ -1,10 +1,21 @@
 //Librairies
 import { FC } from 'react'
+import { motion } from 'framer-motion'
 
 type QuestionProps = {
   question: string
 }
 
 export const Question: FC<QuestionProps> = ({ question }) => {
-  return <h4 className='text-xl mb-2 font-semibold'>{question}</h4>
+  return (
+    <motion.h4
+      initial={{ transform: 'translateY(-20px)', opacity: 0 }}
+      animate={{ transform: 'translateY(0px)', opacity: 1 }}
+      exit={{ transform: 'translateY(-20px)', opacity: 0 }}
+      transition={{ duration: 0.5 }}
+      className='text-xl mb-2 font-semibold'
+    >
+      {question}
+    </motion.h4>
+  )
 }