DevNate Posted December 11, 2022 Share Posted 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> <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> ); } Link to comment Share on other sites More sharing options...
DevNate Posted December 11, 2022 Author Share Posted 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 Link to comment Share on other sites More sharing options...
GreenSock Posted December 12, 2022 Share Posted 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. Link to comment Share on other sites More sharing options...
DevNate Posted December 12, 2022 Author Share Posted 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. Link to comment Share on other sites More sharing options...
GreenSock Posted December 12, 2022 Share Posted 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. Link to comment Share on other sites More sharing options...
joshu_a Posted December 13, 2022 Share Posted 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted December 13, 2022 Share Posted 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! Link to comment Share on other sites More sharing options...
GreenSock Posted December 14, 2022 Share Posted 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. Link to comment Share on other sites More sharing options...
joshu_a Posted December 14, 2022 Share Posted 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted December 14, 2022 Share Posted 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! Link to comment Share on other sites More sharing options...
joshu_a Posted December 14, 2022 Share Posted 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now