React Router and Gsap with ScrollTrigger

[Marshall87]

Hello ! 
 

I'm trying to do my portfolio and I'm stuck with my side scrolling.

I have blank pages that have been added. And my last "Contact" page does not appear.

I watched a lot of tutorials but can't understand where my mistake comes from.

I created a Codesandbox for the occasion.

Here is the result I would like to have: https://codesandbox.io/s/gsap-react-horizontal-scroll-mr4gb1?file=/src/App.js

 

And here is the link of my Codesandbox: https://codesandbox.io/s/empty-leaf-iglxmv?file=/src/App.jsx

If you could help me out that would be cool.

If you have any questions, I would be happy to answer them.

 

Thank you so much

[Rodrigo]

Hi @Marshall87 and welcome to the GreenSock forums!

 

The issue is that you have this in your Section.jsx component:

<div ref={slider} className="container">
  <div className="panel blue">
    <About />
  </div>
  <div className="panel skills">
    <Skills />
  </div>
  <div className="panel projects">
    <Projects />
  </div>
  <div className="panel hobbies">
    <Hobbies />
  </div>
</div>

So every container of each child component has a panel class, so far so good. The problem is here:

<!-- About.jsx -->
<div className="about">
  <h1>Hello</h1>
</div>

<!-- Skills.jsx -->
<div className="skills panel">HELLO WOLRD</div>;

<!-- Project.jsx -->
<div className="panel projects">HELLO WOLRD</div>;

<!-- Hobbies.jsx -->
<div className="panel hobbies">HELLO WOLRD</div>;

<!-- Contact.jsx -->
<div className="lastContainer contact panel">Hello World</div>;

As you can see you have another four elements with the class panel, so when this code runs:

let panels = gsap.utils.toArray(".panel");
gsap.to(panels, {
  xPercent: -100 * (panels.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: slider.current,
    pin: true,
    scrub: 1,
    snap: 1 / (panels.length - 1),
    end: () => "+=" + slider.current.offsetWidth,
    markers: true
  }
});

You have 7 panels instead of 4, so GSAP is doing exactly what you're asking and moves every panel 700 percent on the X axis to the left, you're just creating an extra set of elements. Is better to give a different class to those panels and it should work and remove the panel class from the contact component.

 

I  forked your example and it seems to work the way you expect:

https://codesandbox.io/s/vigilant-sound-mluddg?file=/src/pages/Section/Section.jsx

 

Finally I strongly recommend you to read the articles and resources in this page:

 

Hopefully this helps.

Happy Tweening!

[Marshall87]

Good morning 😁

Thank you very much for your feedback 🙌

Your link https://codesandbox.io/s/vigilant-sound-mluddg?file=/src/pages/Section/Section.jsx doesn't work for me.

So I deleted my divs and left the components.
https://codesandbox.io/s/empty-leaf-iglxmv?file=/src/App.jsx

Thanks for the link to the article, I'll check it out.

My last concern is that my Contact page does not appear at the end.
Instead, it's a blank page 😕
If you ever have an idea of the problem.

Thank you very much in advance.

Good Sunday.

[Marshall87]

I'll get back to you,

problem solved after a lot of testing and research.

I only had a CSS problem.

Problem solved, I also put the link of my code.

Thank you for your help and your great tool!!!

See you soon

https://codesandbox.io/s/empty-leaf-iglxmv?file=/src/App.jsx

[Marshall87]

Hello  

 

I'm back with another problem.

That of the Router from React.

I couldn't find any module on the internet to help me solve my problem.

After Codesandbox problems I had to make a new one.

You will see in the Index.jsx file:
 

  <Header />
  <Gsap />
  <Router />

If the three are activated, the links do not work but the scroll yes, if I put in comment more scroll but the links work.

Any idea for my problem?

The link : https://codesandbox.io/s/gifted-bohr-jwgxk5?file=/src/Index.jsx

Thank you so much

[Rodrigo]

Hi,

 

Unfortunately I can't really follow your app's structure. You kind of have a Router implemented but is not doing anything when you click the links. Right now nothing happens so the cleanup section of the effect hook doesn't run and nothing gets reverted, that's because no component is being unmounted due to the route change.

 

I created this example that uses React Router in order to illustrate that. Notice that the ScrollTrigger and Layers Section routes have ScrollTrigger instances that run without any issues after a route change:

https://stackblitz.com/edit/vitejs-vite-mf8qj8?file=src%2FApp.jsx&terminal=dev

 

I strongly recommend you to check some resources on how to use React Router properly.

This is fresh out of the oven 🥧

Hopefully this helps.

Happy Tweening!