Enhance OrganizationsSlider with fade-in effect and view tracking

Author: mathiasraa

frontend/src/app/_components/LandingHero/Organizations.tsx

@@ -1,11 +1,11 @@
+import { ArrowLeft, ArrowRight } from "@mui/icons-material";
 import { Box, Button, IconButton } from "@mui/material";
 import { styled } from "@mui/system";
 import Link from "next/link";
 import { FreeMode, Mousewheel, Navigation } from "swiper";
 import "swiper/css";
 import { Swiper, SwiperSlide } from "swiper/react";
 
-import { ArrowLeft, ArrowRight } from "@mui/icons-material";
 import { Organization, OrganizationLink } from "./OrganizationLink";
 
 const organizations: Readonly<Organization[]> = [

frontend/src/app/_components/LandingHero/OrganizationsSlider.tsx

@@ -1,14 +1,16 @@
 "use client";
 
-import { Box, Container, Stack, Typography } from "@mui/material";
+import { Box, Container, Fade, Stack, Typography } from "@mui/material";
 import { useEffect, useRef, useState } from "react";
+
 import Organizations from "./Organizations";
 
 const OrganizationsSlider: React.FC = () => {
   const orgsTitleEl = useRef<HTMLElement>();
 
   const [sliderActiveIndex, setSliderActiveIndex] = useState(0);
   const [sliderOffsetX, setSliderOffsetX] = useState(0);
+  const [refInView, setRefInView] = useState(false);
 
   const onActiveIndexChange = (index: number) => {
     setSliderActiveIndex(index);
@@ -17,6 +19,7 @@ const OrganizationsSlider: React.FC = () => {
   const updateSliderOffset = () => {
     if (orgsTitleEl.current) {
       setSliderOffsetX(orgsTitleEl.current.offsetWidth + orgsTitleEl.current.offsetLeft);
+      setRefInView(true);
     }
   };
 
@@ -44,21 +47,23 @@ const OrganizationsSlider: React.FC = () => {
       }}
     >
       <Container>
-        <Stack direction="row" minWidth="max-content" alignItems="center">
-          <Box ref={orgsTitleEl}>
-            <Typography
-              variant="h4"
-              sx={{
-                opacity: sliderActiveIndex == 0 ? 1 : 0,
-                transition: (theme) => theme.transitions.create("opacity"),
-              }}
-            >
-              Våre <br />
-              Foreninger
-            </Typography>
-          </Box>
-          <Organizations onActiveIndexChange={onActiveIndexChange} offsetX={sliderOffsetX + 48} />
-        </Stack>
+        <Fade in={refInView}>
+          <Stack direction="row" minWidth="max-content" alignItems="center">
+            <Box ref={orgsTitleEl}>
+              <Typography
+                variant="h4"
+                sx={{
+                  opacity: sliderActiveIndex == 0 ? 1 : 0,
+                  transition: (theme) => theme.transitions.create("opacity"),
+                }}
+              >
+                Våre <br />
+                Foreninger
+              </Typography>
+            </Box>
+            <Organizations onActiveIndexChange={onActiveIndexChange} offsetX={sliderOffsetX + 48} />
+          </Stack>
+        </Fade>
       </Container>
     </Box>
   );