Franco95
Franco95's Achievements
-
Rare
-
-
Rare
-
Rare
-
Rare
Recent Badges
0
Reputation
-
Yes!! Thank you very much! I have been struggling for days with this. This is the solution 😄
-
Hi there! I'm facing an issue with my scrollTrigger functionality. I have my website with 5 sections and I'm using gsap to jump to the next section and overlap it with the scroll, my problem is that now I need to add redirections in my navbar to each of those sections but the result is not good, I have to repeat my "goToSection" function multiple times to reach from section "2" to section "4" for example. So I want to achieve with one click and one function execution, scrolling to the desired section with no problem I will appreciate any help from you guys! Thank you very much. I drop here a minimal demo of the problem.
-
Hi @Rodrigo! I have made the changes, as you can see if you are in section 2 and click in navbar (section 4), it goes first to section 3. My conclusion is that it only scroll by one section, but I really need that if I click in navbar goes to the section I clicked. https://codepen.io/francobuceta/pen/gOqdooO
-
Hi there! I'm facing an issue with my scrollTrigger functionality. I have my website with 5 sections and I'm using gsap to jump to the next section and overlap it with the scroll, my problem is that now I need to add redirections in my navbar to each of those sections but the result is not good, I have to repeat my "goToSection" function multiple times to reach the section "3" for example. So I want to achieve with one click and one function execution, scrolling to the desired section with no problem I don't have a minimal demo because my website it is very advanced, but I have a codepen that I used as a guide. I will appreciate any help from you guys! Thank you very much.
-
Well I fix my code a little bit but without using Observer and it seems to work pretty good. Can you tell me if I made a good gsap code? useLayoutEffect(() => { const ctx = gsap.context(() => { let sections = gsap.utils.toArray(".panel"); let inGoToSection = false; function goToSection(i) { if (!inGoToSection) { inGoToSection = true; gsap.to(window, { scrollTo: { y: i * innerHeight, autoKill: false, ease: "Power3.easeInOut", }, duration: 0.85, onComplete: () => { inGoToSection = false; }, }); } } sections.forEach((eachPanel, i) => { ScrollTrigger.create({ trigger: eachPanel, onEnter: () => goToSection(i), }); ScrollTrigger.create({ trigger: eachPanel, start: "bottom bottom", pin: true, pinSpacing: false, scrub: 1, onEnterBack: () => { if (!inGoToSection) { goToSection(i); console.log("entre"); } }, }); }); }); return () => ctx.revert(); }, []);
-
Yes! That is what I want. So I need to change all my code to the observer plugin right?
-
Hi @mvaneijgen! Yes, I've a minimal demo in codesandbox using React. Here's the link: CodeSandbox Demo
-
Hi there! I'm trying to replicate an effect in my snapping scroll, when I scroll up or down there is some kind of stop before the other section apears, and I want with a simple scroll go to the next section. I found a gsap code doing that exactly behaviour that I want but it is using scrollTo and gsap.to, and my code is already different, is there a way to replicate that in my code with the code that I already have? Because I have an "overlaping" effect with "pin: true" that I don't want to lose. https://codepen.io/akapowl/pen/YzxoEab/e9015efd3d44b24f9cce5bef29dee1dd My expected snap behaviour: https://codepen.io/urbgimtam/pen/XWXdypQ My snap behaviour: Thank you! Have a good day.
-
Thank you very much Rodrigo! You've been a great help for me, now I understand better how to work with gsap.
-
Wow that works! You're amazing! I tried the gsap.context() but it seemed to me that it wasn't working, now with the "pinSpacing: false" works like a charm, but my last div is still missing, why is that? Because I have a section to include in the bottom of my app. I'm reading the react resources documentation but it only explains simple cases. I leave you againg my updated demo so if you please can check why my last div is not in the screen with this changes: Updated CodeSandbox demo Thank you so much for your help! If it wasn't for you I could't learn more about gsap.
-
Hi Rodrigo! Ok noticed, I've created a minimal demo now with just divs, now it works, but when I add more sections the app breaks. New CodeSandbox Demo As you can see in my new demo, I've an app.jsx with 4 divs, in the second and third div I added the scroll trigger because I just want the overlap effect in those two sections, but when I scroll my app doesn't work properly, when I scroll to the second div it disappears and the last one too, can you help me with that? The scroll snapping functionality that you saw in my old demo was a "scroll-snap-type: y mandatory" in the index.css (I leave that code commented now), it is and effect that I need in my app (if it can be created with gsap let me know). I'm now reading the documentation that you gave me, I'm new with gsap so I've a lot of problem jaja. Thank you very much for your help!!
-
Hi there! I need some help from you guys. I'm trying to apply the effect in the codepen demo, I have two sections (that contains each one a carousel) and I want the second section cover the first section on scroll (same funcionality as the demo but only with these two sections). I'm writing the scroll trigger code in the first carousel component (don't know if this is the right approach), the problem is that when I try to use the "pin: true" property, my first carousel dissapears or moves to the bottom of my app. I don't have a codepen because I'm using React but I made a codesandbox example in this link: CodeSandbox Link Thank you so much!!
-
Hi there! I have this bubbles with an animation following a path, that is working great but when the animation is finished the bubbles stops all in the same place and then align in a grid structure. I want them to align one by one and not to stop. Is this possible? Maybe I took the wrong approach for this. Thank you very much in advance! I am struggling with this for days.
-
Hi there! I'm having a lot of problem to implement gsap scroll trigger with a carousel from react-spring-3d-carousel. I need that when I enter the carousel container, the slides swipes along with the scroll (this is working), but my problem is that I need the scroll stay in the carousel container until all the slides finish, because now the scroll keeps going to the bottom of my site and it's not keeping in the carousel container. I have tried a lot of resources here from the forums and from youtube but nothing makes work it well. I will be very grateful if someone can give me a hand with this issue. I'm new in gsap so I want to still learning and participate in this great community. Thank you very much! I will let my deploy link and my github code here below. Carousel:
