From 840e2d940db63d775a61c9b1704aff18aeabed40 Mon Sep 17 00:00:00 2001
From: Steven <steven@straatemans.nl>
Date: Fri, 25 Oct 2024 14:55:23 +0200
Subject: [PATCH] feat(proof): fadein image (#2617)

---
 .changeset/seven-shrimps-exist.md             |  2 ++
 .../AttendanceTicket/AttendanceTicket.tsx     | 26 ++++++++++++-------
 packages/apps/proof-of-us/src/pages/_app.tsx  |  2 +-
 3 files changed, 20 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/seven-shrimps-exist.md

diff --git a/.changeset/seven-shrimps-exist.md b/.changeset/seven-shrimps-exist.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/seven-shrimps-exist.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/proof-of-us/src/components/AttendanceTicket/AttendanceTicket.tsx b/packages/apps/proof-of-us/src/components/AttendanceTicket/AttendanceTicket.tsx
index dea9da3b23..adf3b695da 100644
--- a/packages/apps/proof-of-us/src/components/AttendanceTicket/AttendanceTicket.tsx
+++ b/packages/apps/proof-of-us/src/components/AttendanceTicket/AttendanceTicket.tsx
@@ -59,15 +59,20 @@ export const AttendanceTicket: FC<IProps> = ({ data, share }) => {
       <Stack
         className={classNames(wrapperClass, { [shareWrapperClass]: share })}
       >
-        <motion.div
-          layoutId={data.image}
-          className={shareClass}
-          style={{
-            backgroundImage: `url("${getIPFSLink(data.image)}")`,
-            backgroundColor: data.properties?.avatar?.backgroundColor,
-            aspectRatio: aspectRatio,
-          }}
-        ></motion.div>
+        {imgWidth && (
+          <motion.div
+            layoutId={data.image}
+            transition={{ delay: 1, duration: 0.5 }}
+            initial={{ opacity: 0, y: '-20%' }}
+            animate={{ opacity: 1, y: 0 }}
+            className={shareClass}
+            style={{
+              backgroundImage: `url("${getIPFSLink(data.image)}")`,
+              backgroundColor: data.properties?.avatar?.backgroundColor,
+              aspectRatio: aspectRatio,
+            }}
+          ></motion.div>
+        )}
         <div className={gradientClass}></div>
       </Stack>
     );
@@ -78,6 +83,9 @@ export const AttendanceTicket: FC<IProps> = ({ data, share }) => {
       <motion.div
         layoutId={data.image}
         className={ticketClass}
+        transition={{ delay: 1, duration: 0.5 }}
+        initial={{ opacity: 0, y: '-20%' }}
+        animate={{ opacity: 1, y: 0 }}
         style={{
           backgroundImage: `url("${getIPFSLink(data.image)}")`,
           backgroundColor: data.properties?.avatar?.backgroundColor,
diff --git a/packages/apps/proof-of-us/src/pages/_app.tsx b/packages/apps/proof-of-us/src/pages/_app.tsx
index 115010a6db..780db1ade6 100644
--- a/packages/apps/proof-of-us/src/pages/_app.tsx
+++ b/packages/apps/proof-of-us/src/pages/_app.tsx
@@ -104,7 +104,7 @@ export const MyApp = ({
         </Head>
         <main className={mainWrapperClass}>
           <CookieConsent />
-          <AnimatePresence mode="popLayout" initial={false}>
+          <AnimatePresence mode="popLayout">
             <Component {...pageProps} key={router.asPath} />
           </AnimatePresence>
         </main>