Add animated scroll logic for /bank from hackclub/v2

components/bank/ScrollHint.js

@@ -1,24 +1,37 @@
 import { Box } from 'theme-ui'
+import AnimatedValue from 'animated-value'
 
-export default function ScrollHint() {
-  return (
-    <Box
-      sx={{
-        display: 'block',
-        position: 'relative',
-        height: '32px',
-        width: '32px',
-        margin: '0 auto',
-        borderBottom: '2px solid #fff',
-        borderRight: '2px solid #fff',
-        transform: 'rotate(45deg)',
-        opacity: '.6',
-        cursor: 'pointer',
-        transition: 'transform .3s',
+const handleClick = () => {
+  const scrollValue = new AnimatedValue({
+    start: document.scrollingElement.scrollTop,
+    end: window.innerHeight,
+    ease: AnimatedValue.CURVES.EXPO_OUT,
+  })
+  scrollValue.play(800, () => {
+    document.scrollingElement.scrollTop = scrollValue.value()
+  })
 
-        '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
-        '&:active': { transform: ' translateY(6px) rotate(45deg)' }
-      }}
-    ></Box>
-  )
 }
+const ScrollHint = () => (
+  <Box
+    sx={{
+      display: 'block',
+      position: 'relative',
+      height: '32px',
+      width: '32px',
+      margin: '0 auto',
+      borderBottom: '2px solid #fff',
+      borderRight: '2px solid #fff',
+      transform: 'rotate(45deg)',
+      opacity: '.6',
+      cursor: 'pointer',
+      transition: 'transform .3s',
+
+      '&:hover': { transform: 'translateY(4px) rotate(45deg)' },
+      '&:active': { transform: ' translateY(6px) rotate(45deg)' }
+    }}
+    onClick={handleClick}
+  ></Box>
+)
+
+export default ScrollHint

package.json

@@ -17,6 +17,7 @@
     "@mdx-js/loader": "^1.6.22",
     "@next/mdx": "^11.1.0",
     "airtable-plus": "^1.0.4",
+    "animated-value": "^0.2.4",
     "globby": "^11.0.4",
     "lodash": "^4.17.21",
     "next": "^11.1.0",