Animate messages and FAQs

src/components/GreetingCard.jsx

@@ -12,7 +12,6 @@ export default function GreetingCard() {
   const animCardStyle = useSpring({
     from: { opacity: 0, width: '50%', transform: 'translate3d(0, 300px, 0)' },
     to: { opacity: 1, width: '70%', transform: 'translate3d(0, 0px, 0)' },
-
   });
 
   const animTitleStyle = useSpring({
@@ -21,7 +20,7 @@ export default function GreetingCard() {
   });
 
   const animDescStyle = useSpring({
-    from: { opacity: 0, fontSize: '5px' },
+    from: { opacity: 0, fontSize: '8px' },
     to: { opacity: 1, fontSize: '16px' },
   });
 

src/components/MessageBubble.jsx

@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import { ThumbsUp, ThumbsDown } from "react-feather";
+import { useSpring, animated } from '@react-spring/web';
 
 export default function MessageBubble({
   text,
@@ -9,6 +10,16 @@ export default function MessageBubble({
   onFeedbackGiven,
   timestamp,
 }) {
+  const animWrapperStyle = useSpring({
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+  });
+
+  const animTextStyle = useSpring({
+    from: { opacity: 0, fontSize: '5px' },
+    to: { opacity: 1, fontSize: '20px' },
+  });
+
   const messageCss = (theme) =>
     css`
       display: inline-block;
@@ -23,6 +34,7 @@ export default function MessageBubble({
       border-color: ${alignLeft && "transparent"};
       margin-right: ${showFeedback ? "20px" : 0};
     `;
+
   const messageWrapperCss = css`
     width: max-content;
     max-width: 70%;
@@ -54,8 +66,8 @@ export default function MessageBubble({
   `;
 
   return (
-    <div css={messageWrapperCss}>
-      <p css={messageCss}>{text}</p>
+    <animated.div style={animWrapperStyle} css={messageWrapperCss}>
+      <animated.p style={animTextStyle} css={messageCss}>{text}</animated.p>
       {showFeedback && (
         <>
           <ThumbsDown
@@ -68,6 +80,6 @@ export default function MessageBubble({
           />
         </>
       )}
-    </div>
+    </animated.div>
   );
 }

src/components/SuggestedOptions.jsx

@@ -1,8 +1,19 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
+import { useSpring, useTrail, animated } from '@react-spring/web';
 import suggestions from "./suggestions";
 
 export default function SuggestedOptions({ onSend, onSuggestionClick }) {
+  const trail = useTrail(suggestions.length, {
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+  });
+
+  const animContactStyle = useSpring({
+    from: { opacity: 0},
+    to: { opacity: 1},
+  });
+
   const contactText =
     "Please send feedback and comments to [email protected]";
 
@@ -58,18 +69,17 @@ export default function SuggestedOptions({ onSend, onSuggestionClick }) {
   return (
     <div css={suggestedOptionsStyle}>
       <ul css={suggestionListStyle}>
-        {suggestions.map((suggestion) => (
-          <li
+        {trail.map(({ opacity }, index) => (
+          <animated.li
+            style={{ opacity }}
             css={suggestionBubbleStyle}
-            key={suggestion}
-            onClick={() => sendMessage(suggestion)}
-          >
-            {suggestion}
-          </li>
-        ))}
+            key={suggestions[index]}
+            onClick={() => sendMessage(suggestions[index])}
+          >{suggestions[index]}
+          </animated.li>))}
       </ul>
 
-      <p css={contactTextStyle}>{contactText}</p>
+      <animated.p style={animContactStyle} css={contactTextStyle}>{contactText}</animated.p>
     </div>
   );
 }