Tests transition in instant

1 files changed, 34 insertions, 5 deletions

diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index b20a2c044..442aa0c8b 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -71,9 +71,9 @@ export const Next0xInstant = () => (
         <Section isFullWidth={true} isPadded={false} padding="30px 0">
           <MarqueeWrap>
               <div>
-                  <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
-                  <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
-                  <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
+                  {[...Array(20)].map((item, index) => (
+                    <Card index={index} />
+                  ))}
               </div>
           </MarqueeWrap>
         </Section>
@@ -110,17 +110,31 @@ export const Next0xInstant = () => (
     </SiteWrap>
 );
 
+// scroll calc for infinite is (width * total / 2) + padding
 const scroll = keyframes`
     0% { transform: translate3d(0, 0, 0) }
-    100% { transform: translate3d(-1715.18px, 0, 0) }
+    100% { transform: translate3d(-2615px, 0, 0) }
 `;
+
+const fadeUp = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+`;
+
+// width = (260 * 20) - (15 * 19)
 const MarqueeWrap = styled.div`
     width: 100vw;
     height: 380px;
     padding-bottom: 60px;
 
     > div {
-        width: 5145.54px;
+        width: 5485px;
         height: 380px;
         display: flex;
         animation: ${scroll} 20s linear infinite;
@@ -131,3 +145,18 @@ const MarqueeWrap = styled.div`
         }
     }
 `;
+
+const Card = styled.div`
+  width: 260px;
+  height: 370px;
+  background: #555;
+  border-radius: 5px;
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(10px);
+  animation: ${fadeUp} 0.5s ${props => `${props.index * 0.05}s`} forwards;
+
+  & + & {
+    margin-left: 15px;
+  }
+`;