Overlap Sections with Scroll Trigger

[Franco95]

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

[Rodrigo]

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!

[Franco95]

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

 

 

[Rodrigo]

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:

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

 

Hopefully this helps

Happy Tweening!

[Franco95]

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. 

[Rodrigo]

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!

[Franco95]

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.