smoooooth animations + deactivated button

components/slack/arrows.js

@@ -1,13 +1,12 @@
 import { VisibilityContext } from 'react-horizontal-scrolling-menu'
-import { useContext } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import Icon from '@hackclub/icons'
-import { Link } from 'theme-ui'
+import { Box, Link } from 'theme-ui'
 
-export function LeftArrow() {
-  const { scrollPrev } = useContext(VisibilityContext)
+function Arrow({ direction, disabled, onClick }) {
   return (
     <Link
-      onClick={() => scrollPrev()}
+      onClick={onClick}
       sx={{
         borderRadius: 100,
         boxShadow: 'none',
@@ -17,38 +16,57 @@ export function LeftArrow() {
         placeItems: 'center',
         display: 'flex',
         mr: 2,
-        ml: [3, 3, 3, 'calc(50vw - 36rem)']
+        ml: direction === 'left' && [3, 3, 3, 'calc(50vw - 36rem)'],
+        opacity: disabled ? '0.5' : '1',
+        pointerEvents: disabled ? 'none' : 'auto',
+        transition: 'opacity 0.3s ease'
       }}
     >
-      <Icon glyph="view-back" size={32} color="white" />
+      <Icon
+        glyph={direction === 'left' ? 'view-back' : 'view-forward'}
+        size={32}
+        color="white"
+      />
     </Link>
   )
 }
 
-export function RightArrow() {
-  const { scrollNext } = useContext(VisibilityContext)
+export function LeftArrow() {
+  const { scrollPrev, visibleElements, isFirstItemVisible } =
+    useContext(VisibilityContext)
+  const [disabled, setDisabled] = useState(false)
+
+  useEffect(() => {
+    if (visibleElements.length) {
+      setDisabled(isFirstItemVisible)
+    }
+  }, [isFirstItemVisible, visibleElements])
+
   return (
-    <Link
-      onClick={() => scrollNext()}
-      sx={{
-        borderRadius: 100,
-        boxShadow: 'none',
-        backgroundColor: 'black',
-        padding: '8px',
-        cursor: 'pointer',
-        placeItems: 'center',
-        display: 'flex'
-      }}
-    >
-      <Icon glyph="view-forward" size={32} color="white" />
-    </Link>
+    <Arrow direction="left" disabled={disabled} onClick={() => scrollPrev()} />
+  )
+}
+
+export function RightArrow() {
+  const { scrollNext, visibleElements, isLastItemVisible } =
+    useContext(VisibilityContext)
+  const [disabled, setDisabled] = useState(false)
+
+  useEffect(() => {
+    if (visibleElements.length) {
+      setDisabled(isLastItemVisible)
+    }
+  }, [isLastItemVisible, visibleElements])
+
+  return (
+    <Arrow direction="right" disabled={disabled} onClick={() => scrollNext()} />
   )
 }
 
 export default function Arrows() {
   return (
-    <div
-      style={{
+    <Box
+      sx={{
         display: 'flex',
         marginBottom: 32,
         position: 'relative'
@@ -57,6 +75,6 @@ export default function Arrows() {
       <div style={{ display: 'flex' }}>
         <LeftArrow /> <RightArrow />
       </div>
-    </div>
+    </Box>
   )
 }

components/slack/project.js

@@ -18,7 +18,6 @@ export default function Project({ title, description, color, img, itemId }) {
         overflow: 'clip',
         width: ['100vw', '40rem', '50rem', '70rem'],
         height: ['25rem', '40rem'],
-        transition: '700ms cubic-bezier(0.075, 0.02, 0.165, 1)',
         transformOrigin: 'center',
         mx: 16,
         ml: [3, 3, 3, `${itemId === 0 && 'calc(50vw - 36rem)'}`]

pages/slack.js

@@ -84,7 +84,11 @@ const SlackPage = () => {
         }}
       >
         <Box onMouseEnter={disableScroll} onMouseLeave={enableScroll}>
-          <ScrollMenu Footer={Arrows} style={{ scrollbar: 'hidden' }}>
+          <ScrollMenu
+            Footer={Arrows}
+            transitionDuration={900}
+            style={{ scrollbar: 'hidden' }}
+          >
             {projects.map(project => (
               <Project
                 title={project.title}