Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jemma

fullpage + scrollTrigger problem

Recommended Posts

hello guys, i'm facing a problem with my code,

trying to use the scrollTrigger function to scroll through brands in section three, but the scroll is flipping the fullpage sections, even though i disabled autoscroll and tried   normalScrollElements

but with no success :(

please any help ? 

 

See the Pen RwGgYQb by jemmawakim (@jemmawakim) on CodePen

Link to post
Share on other sites

Hey jemma and welcome to the GreenSock forums. 

 

Thanks for putting the project on CodePen. Can you please try to make the demo a minimal one? Often times it's helpful to start from the ground up, only adding the relevant parts to recreate the issue that you're asking about. That will help us figure out what's going on a lot more easily.

Link to post
Share on other sites
20 hours ago, ZachSaucier said:

Hey jemma and welcome to the GreenSock forums. 

 

Thanks for putting the project on CodePen. Can you please try to make the demo a minimal one? Often times it's helpful to start from the ground up, only adding the relevant parts to recreate the issue that you're asking about. That will help us figure out what's going on a lot more easily.

thank you Zach, i edited the link 

Link to post
Share on other sites

Thanks for doing that.

 

A few comments:

  • How are you expecting pinning to work with fullpage? Fullpage switches the content as soon as the user scrolls at all, so I don't think there's enough room for ScrollTrigger to pin anything. Perhaps there's a setting for fullpage that I don't know about that allows this but that's a question for the fullpage support, not the GreenSock one.
  • s is not a valid unit for a ScrollTrigger's start or end properties. It should either be px or %
  • pinSpacing is true by default so you can leave that out if you'd like.
  • ScrollTrigger should be set up once the rest of your page is fully ready. So it likely should be within the document ready function that you have.

If you remove the fullpage stuff and enable scrolling, the ScrollTriggers do what you tell it to but the content ends up layered. I think it might help to create the page fully without fullpage, getting ScrollTrigger acting exactly the way you want to, then try getting fullpage to work with. But I'm not sure if they're compatible in the way that you're hoping that they. Again, I'd ask the fullpage support about this sort of situation as it's not really related to GSAP.

  • Like 1
Link to post
Share on other sites
43 minutes ago, ZachSaucier said:

Perhaps there's a setting for fullpage that I don't know about that allows this but that's a question for the fullpage support, not the GreenSock one.

 

Indeed, fullpage.js has a setting, that allows for 'normal' scrolling inside of sections, but a) it is not native scrolling but it translates the content up and down instead, b) out of my own experience I find it to be very finicky and c) since this is not native scrolling, it could become sort of tricky to integrate ScrollTrigger with it.

 

https://alvarotrigo.com/fullPage/examples/scrolling.html#secondPage

  • Like 3
Link to post
Share on other sites
1 minute ago, akapowl said:

it is not native scrolling but it translates the content up and down instead

In that case you'd have to set things up with .scrollerProxy(). But exactly how to do so is a bit out of scope for what we can do for free in these forums @jemma. If you have a specific question about GSAP please let us know and we'll do our best to help!

  • Like 3
Link to post
Share on other sites
11 hours ago, akapowl said:

 

Indeed, fullpage.js has a setting, that allows for 'normal' scrolling inside of sections, but a) it is not native scrolling but it translates the content up and down instead, b) out of my own experience I find it to be very finicky and c) since this is not native scrolling, it could become sort of tricky to integrate ScrollTrigger with it.

 

https://alvarotrigo.com/fullPage/examples/scrolling.html#secondPage

yeah actually scrollTrigger didnt function at all when i used the normalScrolling, I already tried it,
thank you @akapowl

Link to post
Share on other sites
12 hours ago, ZachSaucier said:

Thanks for doing that.

 

A few comments:

  • How are you expecting pinning to work with fullpage? Fullpage switches the content as soon as the user scrolls at all, so I don't think there's enough room for ScrollTrigger to pin anything. Perhaps there's a setting for fullpage that I don't know about that allows this but that's a question for the fullpage support, not the GreenSock one.
  • s is not a valid unit for a ScrollTrigger's start or end properties. It should either be px or %
  • pinSpacing is true by default so you can leave that out if you'd like.
  • ScrollTrigger should be set up once the rest of your page is fully ready. So it likely should be within the document ready function that you have.

If you remove the fullpage stuff and enable scrolling, the ScrollTriggers do what you tell it to but the content ends up layered. I think it might help to create the page fully without fullpage, getting ScrollTrigger acting exactly the way you want to, then try getting fullpage to work with. But I'm not sure if they're compatible in the way that you're hoping that they. Again, I'd ask the fullpage support about this sort of situation as it's not really related to GSAP.

Thank you Zach for your comments, honestly I was frustrated, and I ended messing the code, 
from all the above, I guess i'm gonna ditch the fullpage library, coz it wont function properly 

thank you so much for your help.. 

Link to post
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.

×