Jump to content
Search Community

Franco95

Members
  • Posts

    16
  • Joined

  • Last visited

Posts posted by Franco95

  1. 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

    See the Pen gOqdooO by francobuceta (@francobuceta) on CodePen

  2. On 11/28/2023 at 6:43 PM, Rodrigo said:

    Hi,

     

    There are no links and/or navbar in the demo you posted, which is working as expected.

     

    Please update your demo so it replicates the issue you're having and post another message in this thread (editing your original post won't send us a notification) 🙏

     

    Happy Tweening!

    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.

     

    See the Pen gOqdooO by francobuceta (@francobuceta) on CodePen

     

  3. 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.

     

     

    See the Pen XWXdypQ by urbgimtam (@urbgimtam) on CodePen

  4. 1 hour ago, mvaneijgen said:

    Yep pretty much. That is why I personally always like to start with a timeline, that way you can go every possible route, ScrollTrigger, Observer plugin, ect. 

     

    If you need any help let us know, when your stuck post back here with a minimal demo which what you've tried and someone will be sure to take a look 

    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();
      }, []);

     

  5. 32 minutes ago, mvaneijgen said:

    To me it seems pretty much like you want it, if you scroll (even just a little) it will snap to the next (or previous section). If that is not what you want I think ScrollTrigger is not the tool for this effect. 

     

    Have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/. ScrollTrigger is build for animating based on the scroll bar position, if that is not what you want the Observer plugin can watch for scroll events and then do something. Hope it helps and happy tweening! 

     

     

    See the Pen

    See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

    by GreenSock (@GreenSock) on CodePen

     

    Yes! That is what I want. So I need to change all my code to the observer plugin right?

  6. 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.

     

     

     

    My expected snap behaviour: 

     

    See the Pen XWXdypQ by urbgimtam (@urbgimtam) on CodePen

     

    My snap behaviour:
    Thank you! Have a good day.

    See the Pen e9015efd3d44b24f9cce5bef29dee1dd by akapowl (@akapowl) on CodePen

  7. 3 hours ago, Rodrigo said:

    Hi,

     

    You might think that GSAP Context is not doing anything or not working, but let me assure you that is just a perception and a wrong one. Here is some extra explanation regarding one of the reasons for GSAP Context:

     

    Proper animation 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.

    In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

    Here's the structure:

    // typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
    useLayoutEffect(() => {
      let ctx = gsap.context(() => {
        // all your GSAP animation code here
      });
      return () => ctx.revert(); // <- cleanup!
    }, []);

    This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.

    We strongly recommend reading the React information we've put together at https://gsap.com/resources/React/

     

    The issue with the final section is merely a CSS problem. Pinning is a complex process and in order to make it work the way it should some elements must be added to the HTML and the properties of those elements make others appear to be hidden. Just add position: relative to your last section and it will be visible. Since you're using Tailwind just add the relative class.

     

    Hopefully this helps.

    Happy Tweening!

    Thank you very much Rodrigo! You've been a great help for me, now I understand better how to work with gsap.

  8. 34 minutes ago, Rodrigo said:

    Hi,

     

    As I mentioned in my previous post, you're not using GSAP Context:

     

    Solutions.jsx

    useLayoutEffect(() => {
      const ctx = gsap.context(() => {
        ScrollTrigger.create({
          trigger: carouselSectionRef.current,
          start: "top top",
          pin: true,
        });
      });
      return () => ctx.revert();
    },[]);

     

    Services.jsx

    useLayoutEffect(() => {
      const ctx = gsap.context(() => {
        ScrollTrigger.create({
          trigger: searchRef.current,
          start: "top top",
          pin: true,
        });
      });
      return () => ctx.revert();
    },[]);

     

    Please check the resources in this page:

    https://gsap.com/resources/React

     

    Finally for the snapping behaviour you can use ScrollTrigger snap:

    https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object

     

    But you can combine the CSS feature with ScrollTrigger without any issues as shown in this demo:

     

     

     

    Hopefully this helps

    Happy Tweening!

    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. 

  9. 13 hours ago, Rodrigo said:

    Hi,

     

    There are a few issues in your demo right now. One of them is that you seem to have some sort of scroll snapping functionality tied to the mouse wheel that is not ran by GSAP or ScrollTrigger. Your demo is far from being minimal (that's why we ask for minimal demos with just a few elements, not entire forks or parts of a running app) and I only found GSAP code in one of your files and nothing in that small code snippet should cause the demo behaving like it is right now. Even if I remove all the GSAP part from that component I still see a jump as soon as I scroll a small amount the jump is almost instant. If I add pin: true to the ScrollTrigger config I don't see any glaring issue when scrolling with the scroll bar (that somehow prevents that nasty jump). Unless you can provide a demo that shows the issue you're describing and doesn't make it this hard to debug, is going to be really hard for us to help you.

     

    I'd recommend you to remove some of the plugins you have and perhaps replace some of those components with just empty divs that take the same space in order to see if you can re-create the issue.

     

    Also you're not using GSAP Context. When working with React, GSAP Context is your best friend:

    https://gsap.com/docs/v3/GSAP/gsap.context()

     

    Finally take a look at the resources in this page in order to learn how to correctly use GSAP in React apps:

    https://gsap.com/resources/React

     

    Hopefully this helps.

    Happy Tweening!

    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!!

     

     

  10. 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!!

     

    See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

  11. Yes!! That was excelent! Thank you very much.


    Now, if I don´t want to the first animation stop at all, is that possible? I mean, that the bubble follow it´s path all the way to it´s place in the grid structure without stopping (the grid structure needs to be below of the end of the first animation but I could't resolve it yet).

    I was thinking in an unique path for each bubble but maybe it´s not the correct way.

  12. 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.

    See the Pen wvRNaER by francobuceta (@francobuceta) on CodePen

  13. 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: 

    Screenshot_1.thumb.png.1f5910ada45444abd1fff03357c8d7dc.png

×
×
  • Create New...