Sahn

Thank you for clarifying what the main issue would be for the navbar. Going back to the sliding card, I noticed the second & third section card doesn't slide out and expand like the first card does, instead it abruptly opens and closes here: https://stackblitz.com/edit/stackblitz-starters-ne3hdu?file=app%2Fpage.tsx. Is there a better approach to make the slideItems.forEach slower rather than increasing the duration? Also I added position absolute to the slideItems and a position relative to the main-slide div because I wanted the objects to show up in the same line instead of different lines. However, the card isn't expanding to show it or gives it extra space if the text is too long.

So I'm attempting to connect the href links (About, Projects, Contact) that I have in my navbar.tsx to page.tsx which has the gsap animation code -tlCards and this animates each card section to expand. So the navbar links are in another file and I'm also importing it in Layout.tsx file so it can show up throughout the whole application, the gsap code that animates tlCards is in a separate file (page.tsx). Is it possible to call hrefs from another file and use gsap animation on it, I don't want to redefine those links in page.tsx again because that would be redundant and unnecessary. I was going to try using addEventListeners but that would work if I have the links in the page.tsx file which I don't. Maybe useRef could work here but I'm not too sure about that. I do have a lot of logic in my code and that's because it listens for a custom event - 'navigateToSection' and uses GSAP to scroll to the page section specified by the event's targetId. I'm also not sure if target.offsetTop is what I should be doing or tlCards.offsetTop. https://stackblitz.com/edit/stackblitz-starters-ne3hdu?file=app%2Fpage.tsx

That code was really a mess, I did simplify it and got the horizontal scrolling of each slideItem to work in the Projects Card . Just one question, if I wanted to get rid of the "Check out the different transportation vehicles" text do I need another trigger for that or should I specifically target the second card in the items.forEach and somehow change that placeholder text when the user starts scrolling to then show each of the slideItems. https://stackblitz.com/edit/stackblitz-starters-b9icb8?file=app%2Fpage.tsx

Thank you for pointing that out, the cards are moving again but it's still wonky. Is using a .fromTo appropriate or is .from and .to better? Again I'm trying to make the slideItem show after they see the initial text: <p>Check out the different transportation vehicles</p> and scroll within the card to then iterate over each slideItem https://stackblitz.com/edit/stackblitz-starters-fw7d1f?file=app%2Fpage.tsx

You're right, I didn't take that part out and I haven't been explaining myself correctly. When iterating through elements using forEach, I want to target a specific element to do another animation within that loop. So I want to animate item when i == 1 from one set of properties to another but across two different elements (from .items to .slideItem) which I attempted to do using .fromTo over here: https://stackblitz.com/edit/stackblitz-starters-fw7d1f?file=app%2Fpage.tsx I am also using .add because it's supposed to show the transition from .items to .slideItem.

I overlooked the slide.clientWidth part, I fixed that now and I am trying to get the animation down without worry about the scrollTrigger following your approach. I just don't understand why nothing is happening to the second card to change its content to the slide and slideItems div when that card opens. https://stackblitz.com/edit/stackblitz-starters-b9icb8?file=app%2Fpage.tsx I have tlCards.to(cardsContainer and tlCards.fromTo(content because I don't know which one will make the information from the slide div appear in that second card to replace the current text when they start scrolling within it.

I see, lets say you had information that was previously in the second slide - it could be a paragraph of information and you wanted to change that paragraph to the horizontal sliding that you have currently when the user scrolls in that slide. Would you have to set the horizontal sliding animation to initially have an opacity: 0 and then when a user scrolls on the paragraph information, change that to an opacity: 0 to make it disappear and then show the horizontal sliding animation by doing opacity: auto?

I understand that using the ScrollTrigger can cause issues if used that way however, you can only pin in a ScrollTrigger so if I used a single GSAP timeline then it can only be pinned once in the original ScrollTrigger right? What about if I wanted to pin and scrub within the second card - Projects? https://stackblitz.com/edit/stackblitz-starters-b9icb8?file=app%2Fpage.tsx

The reason I did two scrollTriggers is because I want the div that holds all the sliding info for the second slide to be triggered once the user scrolls and hits that div. I tried your method but ended up adding a scrollTrigger again because it wasn't pinning it and scrolling horizontally. I also tried changing const mainSlide = slideItem.querySelector(".main-slide") as HTMLElement | null; const mainSlide = slideItem.querySelector(".container") as HTMLElement | null; because I thought the div I chose was the issue but that didn't seem to work either. https://stackblitz.com/edit/stackblitz-starters-b9icb8?file=app%2Fpage.tsx

I think I'm closer now with the logic part, I put a scrollTrigger within another scrollTrigger so that when you hit the second card - Projects which has the container className, it should scroll horizontally to show all the sections. For some reason, the trigger is not registering when I hit the container div and so the st timeline doesn't run at all. Also, how could I link the window slider to show what slide your on based on the section you've scrolled into. https://stackblitz.com/edit/stackblitz-starters-u4ogx2?file=app%2Fpage.tsx

I'm trying to change content based on button clicks (they're not really buttons, it's just showing the window you're in). Within the second item that I added that code. I have an idea of how to it, but not sure if I'm going about it the right way, and also if there is a way to change the button color depending on the window you are in. Additionally, with the the navbar, would it be possible to make the each of the links open up at the specific card - so if you click about, it takes you to the about card and opens it for you? The thing is I'm using next.js and I have the card section code in a separate file from page.tsx and navbar.tsx file so I'm not sure how to go about that. I included a navbar.tsx and a page.tsx file in this demo here: https://stackblitz.com/edit/stackblitz-starters-u4ogx2?file=app%2Fpage.tsx

Thank you!

Thank you so much for showing me the issues! I also realized the parallax I had in my project was creating problems too so I took it out and it works now. Is there a way to use parallax with gsap scrollTrigger components?

https://stackblitz.com/edit/stackblitz-starters-hulwcb?file=app%2Fpage.tsx Gotcha, does this work?