Jump to content
Search Community

ScrollTrigger with extra content & react

Tonycre8 test
Moderator Tag

Recommended Posts

Hi guys, having a little bit of trouble here with ScrollTrigger

I'm trying to learn it's usage by following the tutorial for horizontal snapping sections found in the docs.

Mine won't work for some reason however. I'm not sure what I'm doing wrong. I've tried to get gsap to register the ScrollTrigger plugin, and my animation is practically the same as theirs (minus the sections.length - 1 because I don't have that extra panel in the beginning. I'm not sure exactly what's going on.
It's also of note that I'm trying to add this content in the midst of content already on my page.
Any help would be appreciated.

See the Pen bGEMyvx by tonycre8 (@tonycre8) on CodePen


Edit: Please refresh, I've been working on just getting the codepen to render properly as a React component.

Edit 2: It seems as if this code works on the code pen. But it will not work in actual code?? I'm not sure what's going on there.
Here's a video of my code not working in an actual project. The code is identical to the one demonstrated in the codepen. CSS and everything.
https://www.loom.com/share/bf002f5668034e418c9486204dbd8426

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

Link to comment
Share on other sites

Hey Tony, thanks for posting. Hopefully we can help.

 

22 minutes ago, Tonycre8 said:

minus the sections.length - 1 because I don't have that extra panel in the beginning

I'm not sure what you mean about an "extra panel in the beginning".

 

23 minutes ago, Tonycre8 said:

It seems as if this code works on the code pen. But it will not work in actual code??

Not sure what to tell you there. Try using the same code as in the CodePen demo in your non-CodePen build. If it works then you know that it's something else in your code that's messing things up. If it doesn't work, then you're setting things up wrong (maybe a wrong version number, a resource not loading, something like that).

 

It's hard for us to help more pointedly since the demo doesn't recreate the issue.

Link to comment
Share on other sites

Quote

I'm not sure what you mean about an "extra panel in the beginning".

Turns out I did need the -1 afterall! It's something to do with calculating where to end the panels.

 

I tried to get the pen to recreate the issue, but when I put my code in everything was valid lol. So I'm not sure.

 

I did eventually, manage to get it to work. But it involved some incredibly unhealthy practices, such as putting a body tag, inside of a body tag, embedded by other divs. Embedded within my current learning project for this, I have changed my code slightly to bend to the demands of ScrollTrigger.
In my page.js for example, which is a template for my project (header and nav functionality), I have this:
 

return (
    <>
      <div className="loader" ref={el => {loader = el}}>
      <div className="loader-content" ref={el => {loadContent = el}}>
          <img src={Logo}></img>
          <h2>Welcome</h2>
      </div>
      </div>
      <div className="page" ref={el => {app = el}}>
        <div className="header">
          <img className="logo" src={Logo}></img>
          <Nav />
        </div>
        <body>
          {children}
        </body>
      </div>
    </>
    )

Obviously there shouldn't be a body tag within a body, but if I didn't do that then the "width: 100%" for each of the panels wouldn't match, and setting them to "width: 100vw" wouldn't work either. It has to be within a body tag I found.
It still wouldn't fix the height issue of each element though, which was particularly strange. But I just strapped a "height: 100vh" to get it to shut up.
It works up to scratch. But I don't think this should be the way things are done. It's a little strange putting a body inside a body lol, but maybe that's just me.
Here's a video that demonstrates the now working code:
https://www.loom.com/share/f200ff11c1f74e2281d1ca4260a8a65f

Link to comment
Share on other sites

1 hour ago, Tonycre8 said:

I did eventually, manage to get it to work. But it involved some incredibly unhealthy practices, such as putting a body tag, inside of a body tag, embedded by other divs.

That is indeed a very unhealthy practice, hah. I can't imagine that that's required if you find the core issue.

 

1 hour ago, Tonycre8 said:

if I didn't do that then the "width: 100%" for each of the panels wouldn't match, and setting them to "width: 100vw" wouldn't work either.

I'm guessing it was an issue with a parent element then.

 

1 hour ago, Tonycre8 said:

It's a little strange putting a body inside a body lol, but maybe that's just me.

It's not just you. Browsers are pretty forgiving but it's invalid HTML.

Link to comment
Share on other sites

Yeah, I wish we could see a reduced test case that would allow us to recreate the issue on our end. Without that, it's almost impossible for us to troubleshoot. Nobody else has reported any similar issues, and like you said it did work fine on CodePen so it must be something else in your setup. 

 

If you'd still like some help, feel free to post a reduced test case that'd let us reproduce the issue. Sorry to hear about the hassles. 

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

Well, I logged on this afternoon to see if I could replicate the issue.
I ended up fixing it. I'm not exactly sure how but now everything seems to work.
I think this might also be because when I installed gsap via npm, it initially gave me version 3.3.4 instead of 3.4.0? Who knows.
Anyways, thanks a lot for your support nonetheless!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...