FilipTheGod Posted February 20 Share Posted February 20 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! Link to comment Share on other sites More sharing options...
Toso Posted February 20 Share Posted February 20 hi @FilipTheGod happy to see you around, unfortunately, it's hard to debug your code if you didn't add/create a minimal demo, also it can be done in different ways with but idk whats your layout looks like 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 20 Share Posted February 20 Hi, Besides echoing @Toso's request for a minimal demo maybe this example can provide a good starting point: See the Pen mdVyPvK by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
FilipTheGod Posted February 21 Author Share Posted February 21 19 hours ago, Toso said: hi @FilipTheGod happy to see you around, unfortunately, it's hard to debug your code if you didn't add/create a minimal demo, also it can be done in different ways with but idk whats your layout looks like 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> ) } Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 21 Share Posted February 21 Hi @FilipTheGod frist of welcome to the forum and thanks for being a club member! Sometimes it so hard to wrap your head around who something could work before you do some initial tests. I've just written a post how I go about creating something from scratch and how to prevent from getting stuck. Check it out below, the most import point for you might be... Quote That is why I love working in Codepen, first I don't have to worry about my real projects dependancies, or my framework throwing weird errors... If I was you I would just start on code pen and try throwing some stuff at the wall to see what's going to stick. Try setting transformOrigin: "top center" in your tween that scales the logo. Also did you know GSAP animates to the default values of the browser if you do a .from() so the following code .fromTo( logoRef.current, { yPercent: 100, scale: 4, }, { yPercent: 0, scale: 1, duration: 1, ease: "none", } ) // This does the same, but is easier to read .from( logoRef.current, { yPercent: 100, scale: 4, duration: 1, ease: "none", transformOrigin: "top center" // transformOrigin goes here! } ) Hope it helps and happy tweening! 1 Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 21 Share Posted February 21 Hi there! I see you're using React - Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE. Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down. Here is how it works: const container = useRef(); // the root level element of your component (for scoping selector text which is optional) useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container }); // config object offers maximum flexibility Or if you prefer, you can use the same method signature as useEffect(): useGSAP(() => { // gsap code here... }, [endX]); // simple dependency Array setup like useEffect() This pattern follows React's best practices. We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/ If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. Finally since you're using Next is better to import the UMD modules instead of the regular ES modules on NextJS: import gsap from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; // Register the plugin only in the client side if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } 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