DevNate
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by DevNate
-
I have this exact issue using pin and I am yet to see a solution for this
-
The pinned element still skips on my local server.
-
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
-
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> ); }
-
Thanks alot, really appreciate your feedback. But i cant still achieve that smooth backgroundColor transition Thank you so much, i really appreciate your feedback. I am trying to get the smooth backgroundColor change transition effect as seen Change background colour with GSAP ScrollTrigger (codepen.io)
-
thanks a bunch
-
I am trying to recreate this smooth background color change effect on Reactjs. I still cant tell where i am getting it all wrong. https://codepen.io/cameronknight/pen/RwRebNY PS:I am new to using codepen, still cant figure out why my component is not rendering...
-
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;
-
Thank you so much @Rodrigo, as a beginner, line 13 kinda throws me off balance.
-
I'm newbie to gsap and i have been trying to recreate this animation in reactjs but haven't found any success Jump to section with layering - ScrollTrigger (codepen.io), any help will be greatly appreciated