gsapnooby

Here is the link to the website where we are using GSAP with React to build horizontal scroll cards in a section of the website. Everything works fine as expected, but when I scroll to the "Our Services" section and refresh the page, this section overlaps with the one below it. Each section is a React component. What could be the problem? I couldn't figure it out. My best guess is that the height of the container is set to wrap-content/auto, and since the cards are loaded dynamically, the height might not be calculated properly, resulting in the overlap of the sections.

Thank you both. @Rodrigo mentioned I figured that out already but the next challenge is that horizontal scrolling. I cant make slow or slowly reveal rest of the card on scroll.

I have been trying to sequence two animation one after another using gsap. The first part of animation, bring the card one by one in the view on scroll and the second part of the animation make them scroll horizontal until you see the right most card hidden in the overflow. As you can see the codepen below I can't get this done correctly. There are several problems. First, I need to make the cards big enough to make them overflow the parent container. I dont know the way I am doing is correct or not. Second, sequencing the animation. Third, the section which holds the cards, scrolls up and the next section goes under the cards. It doesn't wait the scroll to end and unpin the section. https://codepen.io/yumelabs/pen/vYMNxKa

@Rodrigo I want the cards to scroll horizontally slowly, not that fast as it is happening in my original code. Also, I want the cards to fade out one by one, not all in one go. Please also tell me how can I make cards equal width?

I have been trying to sequence two animation on scrollTrigger using GSAP timeline and scrollTrigger plugin. First Animation works fine but the second one is not working as expected. The second animation should make the cards scroll horizontally on scroll and fade out. Another problem is, the cards don't have equal width. I have tried various combination of tailwind flex configuration but I couldn't active the desired effect. you can see the demo code in the attached codepen.

This has been resolved. I had to just remove mm.revert() to make it work.

Hello GSAPers, I have created a scrolltrigger which works fine but when I use it inside the matchmedia. It stops working. I have no idea what am I missing. // create let mm = gsap.matchMedia(); const tl = gsap.timeline(); mm.add({ isDesktop:`(min-width: ${2000}px) and (prefers-reduced-motion: no-preference)`, isLaptop:`(max-width: ${1920}px) and (prefers-reduced-motion: no-preference)`, isMobile:`(max-width: ${800}px) and (prefers-reduced-motion: no-preference)`, },(context)=>{ function getHeight(opt:any){ if(opt.isDesktop){ return "70%"; }else if(opt.isLaptop){ return "90%"; }else if(opt.isMobile){ return "100%"; } } tl.to(".f-video",{ width:"100%", height:getHeight(context.conditions), borderRadius:'1.5rem', scrollTrigger: { trigger: ".f-width", start: "center center", end: "=+50%", pin:true, scrub: true, // Smooth scrolling animation toggleActions: "play none none reverse", markers: false, }, }); return ()=>{ } })

The animation as you see happens where center section A expands and shows three nav indicators on the right. This section contains three sub-sections A1, A2 and A3 vertically stacked. How do I make the nav indicators clickable and navigate to a particular slide inside the section A. When click on Nav A1 ---shows--> slide A1, Nav A2--> shows--> Slide A2 and Nav A3 -- shows --> Slide A.

@Cassie Thank you so much. I will try again with gsap Observer Plugin and try my luck. I will create a new post if I need to. But I really thought that the part of my code would have a simple fix but again.... Anyway, thank you all.

@mvaneijgen thank you for taking time to reply. On this discussion what I understood is with just GSAP I wont be able to achieve what I am looking for. That's heart breaking. I thought this simple animation with scroll control would be achievable with gsap. Thank you all.

Thank you joining the discussion. My codepen has those section it just, I was trying various code while waiting for the replies. I think I shouldn't edit the codepen that I have shared with you. I will share a demo codepen for your reference here - along with problems that I am facing. You dont see A2 and A3 sections because the code wasn't working as I was trying various things while waiting for the responses. What works 1. On scroll, first animation sequence works which is make text move to the left out of the viewport and (div B & div C ) move to the right out of the viewport while expanding the middle div which contains sections A1, A2, A3 2. When middle div (which contains A1, A2, A3) expands to full width, another scroll triggers the vertical slide of divs A1, A2, A3. What doesn't work 1. When the div expand it doesn't stay like that until the next scroll. It scroll to next subsection 2. When div which contains A1,A2, A3 expands while displaying A1, doesnt stay at A1 until the next scroll. It jumps to the last section A3 immediate. This shouldn't happen. They should move A1-- scroll --> A2 --- scroll-->A3 and so on. I know some has suggested to use scrub but I don't want to scrub the entire timeline. Just this part of the timeline. 3. Also, if you enable snapping, then it creates another problem of auto scrolling to last section A3.

@Cassie Thank you for the reply. Yes, I understood snap and used in my code as you may check my codepen, you will find them in my commented out code. There are few things which I have found confusing in gsap. As you have mentioned on my other questions that nested scrollTrigger is a bad practice, if so then how can I used different snap, scrub, pin,start,end logic in different sections of timeline? As you would see, I don't want the scrub on my entire time, only where the slides are moving on Scroll [A1, A2 and A3]. How do I snap with scrub A1, A2 and A3 on scroll based on A's section without affecting entire timeline.

@mvaneijgenthank you so much again. I figured out scrub and I was using it in my code but the problem was , if I enable snap then the animation from A1 --> A2 doesn't happen. It directly snaps to A1 --> A3, which is not the intended effect.

@mvaneijgen Can you please help me out with the auto scrolling, why the sequence is getting auto scrolled after Div A1 expands? It should go to the next div on scroll only and next after. I have tried various code from vertical scrolltrigger examples but everything was making sections A1,A2 and A3 auto scroll.

@mvaneijgen That totally fixed it. Can you please check why the next sequence auto playing instead of triggering on scroll? Can I use nested scrollTrigger to control the animation?