Jump to content
Search Community

DevNate

Members

  • Posts

    10

  • Joined

  • Last visited

 Content Type 

Posts posted by DevNate

    Pinning a header to the center of the viewport in reactjs

    in GSAP

    Posted

    1 hour ago, DevNate said:

    I am trying to pin the header ".typo" when the scroll position gets to the center of the viewport but the element(header) skips/jumps to the end position. Your help will be greatly appreciated as i have been stuck on this for days now.

     

    import { Box, Container, Stack, Typography } from "@mui/material";
    import Head from "next/head";
    import Image from "next/image";
    import Project from "../Components/Project";
    import { gsap } from "gsap/dist/gsap";
    import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
    import { useLayoutEffect, useRef } from "react";
     
    gsap.registerPlugin(ScrollTrigger);
     
    export default function Home() {
      const headerRef = useRef(null);
      useLayoutEffect(() => {
        let ctx = gsap.context(() => {
          gsap.to(
            ".typo",
            {
              scrollTrigger: {
                trigger: ".typo",
                markers: true,
                start: "top center",
                end: "bottom 30%",
                scrub: true,
                pin: true,
                // pinSpacing: false,
              },
            },
            headerRef
          );
        });
     
        return () => ctx.revert;
      }, []);
     
      return (
        <div>
          <Head>
            <title>Nate Port</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/favicon.ico" />
          </Head>
     
          <main>
            <Container maxWidth="xl" sx={{ overflowX: "hidden" }}>
              <Box sx={{ height: "100vh" }} />
              <Stack
                ref={headerRef}
                justifyContent="start"
                alignItems="center"
                sx={{ height: "300vh", width: "100%", border: "2px solid white" }}
              >
                <Stack direction="row">
                  <div className="typo">
                    <Typography
                      sx={{
                        fontSize: "20vw",
                      }}
                      variant="h1"
                    >
                      PROJECT
                    </Typography>
                  </div>
                </Stack>
                <div>
                  <Project />
                </div>
              </Stack>
              <Box sx={{ height: "100vh" }} />
            </Container>
          </main>
        </div>
      );
    }

    I  implemented the logic on codepen and got the desired result. Any work around this please? https://codesandbox.io/s/intelligent-rgb-0c04e9?file=/src/App.js

    Pinning a header to the center of the viewport in reactjs

    in GSAP

    Posted

    I am trying to pin the header ".typo" when the scroll position gets to the center of the viewport but the element(header) skips/jumps to the end position. Your help will be greatly appreciated as i have been stuck on this for days now.

     

    import { Box, Container, Stack, Typography } from "@mui/material";
    import Head from "next/head";
    import Image from "next/image";
    import Project from "../Components/Project";
    import { gsap } from "gsap/dist/gsap";
    import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
    import { useLayoutEffect, useRef } from "react";
     
    gsap.registerPlugin(ScrollTrigger);
     
    export default function Home() {
      const headerRef = useRef(null);
      useLayoutEffect(() => {
        let ctx = gsap.context(() => {
          gsap.to(
            ".typo",
            {
              scrollTrigger: {
                trigger: ".typo",
                markers: true,
                start: "top center",
                end: "bottom 30%",
                scrub: true,
                pin: true,
                // pinSpacing: false,
              },
            },
            headerRef
          );
        });
     
        return () => ctx.revert;
      }, []);
     
      return (
        <div>
          <Head>
            <title>Nate Port</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/favicon.ico" />
          </Head>
     
          <main>
            <Container maxWidth="xl" sx={{ overflowX: "hidden" }}>
              <Box sx={{ height: "100vh" }} />
              <Stack
                ref={headerRef}
                justifyContent="start"
                alignItems="center"
                sx={{ height: "300vh", width: "100%", border: "2px solid white" }}
              >
                <Stack direction="row">
                  <div className="typo">
                    <Typography
                      sx={{
                        fontSize: "20vw",
                      }}
                      variant="h1"
                    >
                      PROJECT
                    </Typography>
                  </div>
                </Stack>
                <div>
                  <Project />
                </div>
              </Stack>
              <Box sx={{ height: "100vh" }} />
            </Container>
          </main>
        </div>
      );
    }

    Change Section Background Color Dynamically

    in GSAP

    Posted

    21 hours ago, Rodrigo said:

    Hi,

     

    Here is a port of your example in Stackblitz:

    https://stackblitz.com/edit/react-zwvplu?file=src%2FApp.js

     

    I made some corrections to a few things. Data attributes in react should always be lowercase, avoid camel casing them. Also you don't need to look for the data-something attribute in your elements, just use element.dataset.bgcolor and it works.

     

    Let us know if you have more questions.

     

    Happy Tweening!

    Thanks alot, really appreciate your feedback. But i cant still achieve that smooth backgroundColor transition

     

    21 hours ago, Rodrigo said:

    Hi,

     

    Here is a port of your example in Stackblitz:

    https://stackblitz.com/edit/react-zwvplu?file=src%2FApp.js

     

    I made some corrections to a few things. Data attributes in react should always be lowercase, avoid camel casing them. Also you don't need to look for the data-something attribute in your elements, just use element.dataset.bgcolor and it works.

     

    Let us know if you have more questions.

     

    Happy Tweening!

    Thank you so much, i really appreciate your feedback. I am trying to get the smooth backgroundColor change transition effect as seen 

    See the Pen RwRebNY by cameronknight (@cameronknight) on CodePen

    Pin section text to top untill section items scroll

    in GSAP

    Posted

    Apologies, i try to write the code on codepen but it keeps refreshing. I want to be able to pin the section title to the top of the view port while the user is scrolling images untill the last item is reached but the title always skipps(jumps). Below is my code, I appreciate your response 

     

     

    import React, { useEffect, useRef } from "react";
    import { gsap } from "gsap/dist/gsap";
    import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
     
    function Pin() {
      const headerRef = useRef(null);
     
      useEffect(() => {
        const ctx = gsap.context(() => {
          gsap.to(".heading", {
            scrollTrigger: {
              trigger: ".heading",
              start: "top top",
              end: 1200,
              markers: true,
              pin: ".heading",
              scrub: true,
            },
          });
        });
      }, []);
     
      return (
        <>
          <div className="w-full h-screen bg-gray-200 ">Text</div>
          <div
            ref={headerRef}
            className="h-content w-full relative flex flex-row justify-center items-center"
          >
            <h1 className="heading text-9xl left-[2%]  z-40 top-6  absolute">
              Pin this to top till section scroll
            </h1>
     
            <div className="z-50">
              <div className="w-full h-screen flex justify-center items-center ">
                <div className="flex justify-center items-center text-white  bg-red-500 w-[50vw] h-[60vh]">
                  the project
                </div>
              </div>
              <div className="w-full h-screen flex justify-center items-center ">
                <div className="flex justify-center items-center text-white  bg-red-500 w-[50vw] h-[60vh]">
                  the project
                </div>
              </div>
            </div>
          </div>
          <div className="w-full h-screen bg-blue-100">Text</div>
        </>
      );
    }
     
    export default Pin;
×
×
  • Create New...