fix(landing): update animation trigger (#184)

codesandbox · Nov 25, 2021 · 8c94cd7 · 8c94cd7
1 parent 6eccfee
commit 8c94cd7
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/website/landing/components/AdvancedUsage/UsageExample.tsx b/website/landing/components/AdvancedUsage/UsageExample.tsx
@@ -21,7 +21,10 @@ export const UsageExample: React.FC<UsageExampleProps> = ({
   exampleIndex,
 }) => {
   const shouldAnimate = useBreakpoint("bp2");
-  const { ref, inView } = useInView({ threshold: 0 });
+  const { ref, inView } = useInView({
+    threshold: 0,
+    triggerOnce: !shouldAnimate,
+  });
 
   return (
     <Box css={{ height: "100vh", maxHeight: "1080px" }}>
@@ -52,7 +55,7 @@ export const UsageExample: React.FC<UsageExampleProps> = ({
         <Box ref={ref}>
           <ExampleIllustration
             illustrationKey={example.illustrationKey}
-            visible={!shouldAnimate || inView}
+            visible={inView}
           />
         </Box>
         <Box>

diff --git a/website/landing/components/Intro/Examples.tsx b/website/landing/components/Intro/Examples.tsx
@@ -23,6 +23,7 @@ export const Examples: React.FC = () => {
   const { layoutFiles, visibility } = useLayoutExampleContext();
 
   const { scrollY } = useViewportScroll();
+
   const isMedium = useBreakpoint("bp2");
   const isLarge = useBreakpoint("bp3");
   const isXLarge = useBreakpoint("2260");

diff --git a/website/landing/components/Showcase/Showcase.tsx b/website/landing/components/Showcase/Showcase.tsx
@@ -30,7 +30,6 @@ const HighlightPreview: React.FC<{ source: string; alt: string }> = ({
         background: "$surface",
         color: "white",
         display: "flex",
-        height: "595px",
         justifyContent: "center",
         margin: "0 auto",
         width: "100%",
@@ -50,7 +49,7 @@ const HighlightPreview: React.FC<{ source: string; alt: string }> = ({
         },
       }}
     >
-      <Image alt={alt} height={720} src={source} width={480} />
+      <Image alt={alt} height={1440} src={source} width={960} />
     </Box>
   );
 };

diff --git a/website/landing/components/Users/Users.tsx b/website/landing/components/Users/Users.tsx
@@ -48,6 +48,7 @@ export const Users: React.FC = () => {
   // and then do an opacity transition.
   const { ref: listRef, inView } = useInView({
     threshold: [0, 1],
+    triggerOnce: !shouldAnimate,
   });
 
   return (