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?

@mvaneijgen if you try to scroll down to the end marker and go back up and wait for a bit, It will show the actual starting state. I have added the screenshot in my original post for the reference. Technically the animation should start from that state (as shown in the screenshot) and end when the Div A has expanded to full width. Further more, there are three Divs A, B, C are there which will appear one by one on further scroll. I implemented that code but when I scroll, it scrolls and slides to Div C immediately without stopping at Div B. Also, I just forked one code pen example shared on this forum which has older version of gsap , but I have updated to new one now.

On page load the the animation shows the end state. When you scroll a bit further down and scroll back up, you can see correct starting state and the follows the correct animation sequence. Can anyone tell me why that happens?

Oh! let me try again - As you see in the image Div A expands and becomes full screen. B and C come into the view one at a time when user scroll, one by one.

HI Cassie , thank you so much for the reply. Can you just also guide me to trigger Div A, Div B and Div C move on scroll one at a time, first scroll moves Div A, second scroll moves Div B and then Div C. ?

I am trying to create an animation where grid tile will expand take full width and become horizontal slides. But as you see in the codepen, only part of the animation is working. Animation sequence 1. Section text moves away to the left 2. While section text is moving away to the left Div A expands and take the full width. Meanwhile Div B and Div C moves aways to the right without getting rezied 3. Div A, Div B and Div C appears one by one on scroll I took the code from this codepen to create horizontal slides but that's not working either

@mvaneijgen Thank you so much.

@mvaneijgen Thanks for the reply. As you can see in the codepen demo, the animation is not getting completed in first scroll but as soon as you do reverse scroll and the do forward scroll animation gets completed. But, there is another problem occurred, I used the same code in my react where one component is one section, is pinned during the animation which is causing the overlap. Also, the subtext inside the card is not showing and hiding as intended. They should be visible when cards fully expanded and hidden when they are small.

I am using tailwind css to create my section layout and trying to animate them using gsap. As you can see in the shared codepen, there are three cards slightly position away from the top (by design) and when scroll happens they move in the center and occupy horizontal space evenly while maintaining their gaps. The animation of the cards from their initial state to final state is absurd. They should start moving together with slight delay to reach in their final position. Right now all these cards first move in the center and then reposition themselves which is not the intended animation. Also, I have some nested animation with in the cards so to clean up my code, I was thinking to add the animation using intermediate functions const tl = gsap.timeline() tl.add(animateSectionText()) tl.add(animateCardsParentContainer()) tl.add(animateCards()) tl.add(animateCardsContent()) I was trying this but my animation stopped working. If I takeout my timelines out of those functions and add them directly to timeline then they work but not inside the functions.

Thank you this explains everything. Thank you.

I have a single page website where each section is a component. Every section has some animation triggered on the scroll event. Every animation in every section gets trigged twice on scroll. To debug this, I have just enabled markers one by one in every component to see what's the problem. Surprisingly what I have found that every section has repeated markers - 2 starts and 2 ends. When first "start marker" hits the viewport center, it trigger the animation and when again the second "start marker" hits the viewport center, it trigger the animation again. The code is simple and there is nothing I am not doing anything fancy. As the code suggest animation brings the list item in one by one - useEffect(()=>{ gsap.defaults({ ease: "power3" }); const blogListArray = gsap.utils.toArray(".blog-list-item"); blogListArray.forEach((item, index)=> { gsap.fromTo(item, {xPercent:-50*index,opacity:0},{xPercent:0,opacity:1, duration:0.5, scrollTrigger:{ trigger: "#section-list", toggleActions: "play none none reverse", start: 'center center', // trigger element, viewport end:"bottom center", markers:true }}) }) },[])