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

---
 .../public/images/@next/0x-instant/widget-1.png    | Bin 37046 -> 27160 bytes
 .../public/images/@next/0x-instant/widget-2.png    | Bin 68311 -> 47878 bytes
 .../public/images/@next/0x-instant/widget-3.png    | Bin 37805 -> 27505 bytes
 .../public/images/@next/0x-instant/widget-4.png    | Bin 37148 -> 30727 bytes
 .../public/images/@next/0x-instant/widget-5.png    | Bin 181796 -> 144454 bytes
 .../public/images/@next/0x-instant/widget-6.png    | Bin 37812 -> 28382 bytes
 packages/website/ts/@next/pages/instant.tsx        |  17 ++++++++++-------
 7 files changed, 10 insertions(+), 7 deletions(-)
 mode change 100644 => 100755 packages/website/public/images/@next/0x-instant/widget-1.png
 mode change 100644 => 100755 packages/website/public/images/@next/0x-instant/widget-2.png
 mode change 100644 => 100755 packages/website/public/images/@next/0x-instant/widget-3.png
 mode change 100644 => 100755 packages/website/public/images/@next/0x-instant/widget-4.png
 mode change 100644 => 100755 packages/website/public/images/@next/0x-instant/widget-5.png
 mode change 100644 => 100755 packages/website/public/images/@next/0x-instant/widget-6.png

(limited to 'packages/website')

diff --git a/packages/website/public/images/@next/0x-instant/widget-1.png b/packages/website/public/images/@next/0x-instant/widget-1.png
old mode 100644
new mode 100755
index 9c3abe97b..622c1f42c
Binary files a/packages/website/public/images/@next/0x-instant/widget-1.png and b/packages/website/public/images/@next/0x-instant/widget-1.png differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-2.png b/packages/website/public/images/@next/0x-instant/widget-2.png
old mode 100644
new mode 100755
index dbe662e89..7fec16cfb
Binary files a/packages/website/public/images/@next/0x-instant/widget-2.png and b/packages/website/public/images/@next/0x-instant/widget-2.png differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-3.png b/packages/website/public/images/@next/0x-instant/widget-3.png
old mode 100644
new mode 100755
index d74755361..91ac7d36a
Binary files a/packages/website/public/images/@next/0x-instant/widget-3.png and b/packages/website/public/images/@next/0x-instant/widget-3.png differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-4.png b/packages/website/public/images/@next/0x-instant/widget-4.png
old mode 100644
new mode 100755
index 45ef37fa6..3db35e068
Binary files a/packages/website/public/images/@next/0x-instant/widget-4.png and b/packages/website/public/images/@next/0x-instant/widget-4.png differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-5.png b/packages/website/public/images/@next/0x-instant/widget-5.png
old mode 100644
new mode 100755
index 992353efe..05cebf28b
Binary files a/packages/website/public/images/@next/0x-instant/widget-5.png and b/packages/website/public/images/@next/0x-instant/widget-5.png differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-6.png b/packages/website/public/images/@next/0x-instant/widget-6.png
old mode 100644
new mode 100755
index a4bd33de2..33def6e04
Binary files a/packages/website/public/images/@next/0x-instant/widget-6.png and b/packages/website/public/images/@next/0x-instant/widget-6.png differ
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