FilipTheGod

Hey Toso Sorry for not leaving any repo or code block. This is my Navbar component. I use next.js and Tailwind but also added something to the global.css Also I will leave you with some photos of how the code looks in normal state and after you scroll. After you scroll it looks good but in initial state it is bugged inside the screen. I thought maybe the logo to be put in another component and for it to stop in the nav looking like it is part of that component. I would love some recommendations on this or any help. This is the end goal(https://www.human-nyc.com/.) Thank you so much! initial: after scroll: global.css: .shrink { transform: scale(0.5); opacity: 0.5; } Navbar: "use client" import React, { useRef, useEffect } from "react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" import Link from "next/link" gsap.registerPlugin(ScrollTrigger) export default function Navbar() { const logoRef = useRef<HTMLDivElement>(null) // Ref for the logo element useEffect(() => { // GSAP will handle the logo animation if (logoRef.current) { gsap .timeline({ scrollTrigger: { trigger: logoRef.current, start: "top top", end: "bottom top", scrub: 1, }, }) .fromTo( logoRef.current, { yPercent: 100, scale: 4, }, { yPercent: 0, scale: 1, duration: 1, ease: "none", } ) } }, []) return ( <div> <nav className="fixed top-0 left-0 w-full flex justify-between items-center bg-almost-black px-4 py-2 z-50 transition-all duration-300"> <div className="flex-1 flex items-center space-x-4"> <a href="mailto:hello@pointblank.design" className="text-pedestrian-lemon font-telegraf" > Contact </a> <Link className="text-pedestrian-lemon font-telegraf" href="/about"> About{" "} </Link> </div> <div ref={logoRef} className="text-pearl-white uppercase font-grandir-italic tracking-tighter transition-all duration-300" style={{ transformOrigin: "center bottom", }} > POINT • BLANK </div> <div className="flex-1 flex justify-end items-center space-x-4"> <Link className="text-pedestrian-lemon font-telegraf" href="https://www.instagram.com/pointblank.design/" > Instagram </Link> <Link className="text-pedestrian-lemon font-telegraf" href="https://twitter.com/PointBlankpbk" > Twitter{" "} </Link> </div> </nav> </div> ) }

Hey guys.I am a beginner at GSAP and I want to create an effect similar to what this studio did with their logo: https://www.human-nyc.com/. How would I make that possible. I am also using React(Next.js) for this project. Thank so much for the help!