Hide/reveal the scroll hint in demo

vovacodes · Mar 27, 2021 · 810773c · 810773c
1 parent 5d3a45e
commit 810773c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 27 deletions.
diff --git a/packages/demo/src/apps/Home/components/DemoSelector.tsx b/packages/demo/src/apps/Home/components/DemoSelector.tsx
@@ -15,7 +15,7 @@ export function DemoSelector() {
                     ...Typography.heading2,
                 }}
             >
-                Choose a demo
+                Select a demo
             </h1>
             <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
                 <div style={{ margin: "20px 40px" }}>

diff --git a/packages/demo/src/apps/Home/index.tsx b/packages/demo/src/apps/Home/index.tsx
@@ -4,8 +4,11 @@ import { Hint } from "../../components/Hint.js"
 import { Hero } from "./components/Hero.js"
 import { ScrollHint } from "../../components/ScrollHint.js"
 import { DemoSelector } from "./components/DemoSelector.js"
+import { AnimatePresence, motion } from "framer-motion"
 
 export function Home() {
+    const hideScrollHintText = useScrollThreshold({ threshold: 10 })
+
     return (
         <>
             <Header />
@@ -19,7 +22,18 @@ export function Home() {
             >
                 <Hero />
                 <DemoSelector />
-                <ScrollHint />
+                <AnimatePresence initial={false}>
+                    {!hideScrollHintText && (
+                        <motion.div
+                            initial={{ opacity: 0, y: "150%" }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: "150%" }}
+                            style={{ position: "fixed", bottom: 20 }}
+                        >
+                            <ScrollHint />
+                        </motion.div>
+                    )}
+                </AnimatePresence>
                 <Hint>
                     <div>
                         Navigation - <b>{"↑"}</b>, <b>{"↓"}</b>, <b>{"<-"}</b> and <b>{"->"}</b>
@@ -35,3 +49,24 @@ export function Home() {
         </>
     )
 }
+
+function useScrollThreshold({ threshold }: { threshold: number }) {
+    const [passed, dispatch] = React.useReducer((_prevPassed: boolean, passed: boolean) => {
+        return passed
+    }, false)
+
+    React.useEffect(() => {
+        function handleScroll() {
+            if (window.scrollY > threshold) {
+                return dispatch(true)
+            }
+
+            dispatch(false)
+        }
+        window.addEventListener("scroll", handleScroll)
+
+        return () => window.removeEventListener("scroll", handleScroll)
+    }, [threshold, dispatch])
+
+    return passed
+}
diff --git a/packages/demo/src/components/PageSlide.tsx b/packages/demo/src/components/PageSlide.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
-import { RefObject } from "react"
 import { Branch, useFocusable, useFocusManager } from "react-sunbeam"
 import { useMergedRef } from "../apps/utils/useMergedRef.js"
+import { useIntersectionObserver } from "./useIntersectionObserver.js"
 
 export const PageSlide = React.forwardRef(function PageSlide(
     {
@@ -70,25 +70,3 @@ export const PageSlide = React.forwardRef(function PageSlide(
         </Branch>
     )
 })
-
-function useIntersectionObserver<T extends HTMLElement>(
-    ref: RefObject<T>,
-    percentage: number,
-    callback: (isIntersecting: boolean) => void
-) {
-    React.useEffect(() => {
-        if (!ref.current) return
-
-        const intersectionObserver = new IntersectionObserver(
-            (entries) => {
-                const entry = entries[0]
-                callback(entry.isIntersecting)
-            },
-            { threshold: percentage }
-        )
-
-        intersectionObserver.observe(ref.current)
-
-        return () => intersectionObserver.disconnect()
-    }, [ref, callback, percentage])
-}
diff --git a/packages/demo/src/components/ScrollHint.tsx b/packages/demo/src/components/ScrollHint.tsx
@@ -6,8 +6,6 @@ export function ScrollHint() {
     return (
         <div
             style={{
-                position: "fixed",
-                bottom: 20,
                 display: "flex",
                 flexDirection: "column",
                 justifyContent: "center",

diff --git a/packages/demo/src/components/useIntersectionObserver.ts b/packages/demo/src/components/useIntersectionObserver.ts
@@ -0,0 +1,24 @@
+import * as React from "react"
+import { RefObject } from "react"
+
+export function useIntersectionObserver<T extends HTMLElement>(
+    ref: RefObject<T>,
+    percentage: number,
+    callback: (isIntersecting: boolean) => void
+) {
+    React.useEffect(() => {
+        if (!ref.current) return
+
+        const intersectionObserver = new IntersectionObserver(
+            (entries) => {
+                const entry = entries[0]
+                callback(entry.isIntersecting)
+            },
+            { threshold: percentage }
+        )
+
+        intersectionObserver.observe(ref.current)
+
+        return () => intersectionObserver.disconnect()
+    }, [ref, callback, percentage])
+}