feat(proof): fadein image (#2617)

kadena-community · Nov 28, 2024 · 840e2d9 · 840e2d9
1 parent 33f7aa0
commit 840e2d9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/.changeset/seven-shrimps-exist.md 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
@@ -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
@@ -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>