Pinning a header to the center of the viewport in reactjs

DevNate · December 11, 2022

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>

</Head>

<main>

<Stack

ref={headerRef}

justifyContent="start"

alignItems="center"

sx={{ height: "300vh", width: "100%", border: "2px solid white" }}

>

<Typography

sx={{

fontSize: "20vw",

}}

variant="h1"

>

PROJECT

</Typography>

</div>

</Stack>

<div>

</div>

</Stack>

</Container>

</main>

</div>

);

}

DevNate · December 11, 2022

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

GreenSock · December 12, 2022

Hi @DevNate. Your demo seems to be working fine - is there still a problem? If so, please let us know the steps to reproduce it and we can take a look.

DevNate · December 12, 2022

4 hours ago, GreenSock said:

Hi @DevNate. Your demo seems to be working fine - is there still a problem? If so, please let us know the steps to reproduce it and we can take a look.

The pinned element still skips on my local server.

GreenSock · December 12, 2022

8 hours ago, DevNate said:

The pinned element still skips on my local server.

Are you saying it works correctly in CodeSandbox (your link) but NOT on your local system? If so, my best guess is that you're either using an outdated version of GSAP or you've got hot reloading enabled in your local system that's only partially updating things in the DOM (unrelated to GSAP - that'd be your local hot reloading workflow issue). Did you make sure you did a full refresh?

If you still have trouble, please make sure you provide a minimal demo that clearly shows the problem and we'd be happy to take a look. It's just tough to troubleshoot blind.

joshu_a · December 13, 2022

On 12/12/2022 at 4:25 AM, DevNate said:

The pinned element still skips on my local server.

I've also noticed GSAP acts a little funky when running next.js in yarn dev. hit or miss sometimes, usually running yarn build && yarn start works fine though.

Rodrigo · December 13, 2022

Hi @joshu_a,

Be sure to use GSAP Context when working with React:

https://greensock.com/docs/v3/GSAP/gsap.context()

Maybe you're seeing some issues because of the double useEffect() calls on React Strict Mode.

Also take a look at this:

Happy Tweening!

GreenSock · December 14, 2022

3 hours ago, joshu_a said:

I've also noticed GSAP acts a little funky when running next.js in yarn dev. hit or miss sometimes, usually running yarn build && yarn start works fine though.

Yeah, that kinda sounds like what I described earlier - a hot reloading issue in your dev workflow where it only partially injects things while you're developing. Totally unrelated to GSAP. Maybe try disabling the hot reloading or do a hard-refresh to see if it's actually working without the hot reloading partial stuff. I'm totally guessing here since no minimal demo was provided that clearly shows the issue. If you've got one of those, we'd be happy to take a peek.

joshu_a · December 14, 2022

13 hours ago, GreenSock said:

Yeah, that kinda sounds like what I described earlier - a hot reloading issue in your dev workflow where it only partially injects things while you're developing. Totally unrelated to GSAP. Maybe try disabling the hot reloading or do a hard-refresh to see if it's actually working without the hot reloading partial stuff. I'm totally guessing here since no minimal demo was provided that clearly shows the issue. If you've got one of those, we'd be happy to take a peek.

I'd provide a minimal demo, however oddly enough it seems to work fine when running in codepen or code sandbox -- the issue only seems to happen when running yarn dev locally.

Rodrigo · December 14, 2022

6 minutes ago, joshu_a said:

I'd provide a minimal demo, however oddly enough it seems to work fine when running in codepen or code sandbox -- the issue only seems to happen when running yarn dev locally.

I agree with Jack on this, I think the issue is the way Hot Reloading is working on your particular setup, since you mention a production build works as expected. Unfortunately we can't dig deeper into this type of issues since we don't have the capacities and time to dedicate to them.

Happy Tweening!

joshu_a · December 14, 2022

21 minutes ago, Rodrigo said:

I agree with Jack on this, I think the issue is the way Hot Reloading is working on your particular setup, since you mention a production build works as expected. Unfortunately we can't dig deeper into this type of issues since we don't have the capacities and time to dedicate to them.

Happy Tweening!

I believe this is also the issue, going to look into wether or not you can disable this feature in Next.js.

Thanks!

Pinning a header to the center of the viewport in reactjs

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members