Need help, feeling stuck!

[FilipTheGod]

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!
 

[Toso]

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

 

[Rodrigo]

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!

[FilipTheGod]

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>

)

}

[mvaneijgen]

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! 

 

 

 

[GSAP Helper]

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);
}