From 166a6c85fd2aaa1e284dfb3fc3dfc04e92c24fa8 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 13:27:47 +0100
Subject: Slower instant transition, high res images

---
 packages/website/ts/@next/pages/instant.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

(limited to 'packages/website/ts/@next')

diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index 86a2485ce..9f996b182 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -71,7 +71,7 @@ export const Next0xInstant = () => (
         <Section isFullWidth={true} isPadded={false} padding="30px 0">
           <MarqueeWrap>
               <div>
-                  {[...Array(12)].map((item, index) => (
+                  {[...Array(18)].map((item, index) => (
                     <Card key={`card-${index}`} index={index}>
                       <img src={`/images/@next/0x-instant/widget-${(index % 6) + 1}.png`} />
                     </Card>
@@ -114,9 +114,10 @@ export const Next0xInstant = () => (
 );
 
 // scroll animation calc is simply (imageWidth * totalRepetitions) / 2
+// img width is 370px
 const scroll = keyframes`
-    0% { transform: translate3d(0, 0, 0) }
-    100% { transform: translate3d(-2220px, 0, 0) }
+    0% { transform: translate3d(-2220px, 0, 0) }
+    100% { transform: translate3d(-4440px, 0, 0) }
 `;
 
 const scrollMobile = keyframes`
@@ -142,6 +143,7 @@ const ConfiguratorSection = styled(Section)<SectionProps>`
 `;
 
 // width = 370 * 12
+// mobile width = 300
 const MarqueeWrap = styled.div`
     width: 100vw;
     height: 514px;
@@ -151,19 +153,20 @@ const MarqueeWrap = styled.div`
         height: auto;
         display: flex;
         will-change: transform;
+        transform: translate3d(-2220px, 0, 0);
     }
 
     @media (min-width: 768px) {
       > div {
-          width: 4440px;
-          animation: ${scroll} 30s linear infinite;
+          width: 6660px;
+          animation: ${scroll} 70s linear infinite;
       }
     }
 
     @media (max-width: 768px) {
       > div {
-          width: 3600px;
-          animation: ${scrollMobile} 30s linear infinite;
+          width: 5400px;
+          animation: ${scrollMobile} 70s linear infinite;
       }
     }
 `;
-- 
cgit