popland Posted June 23, 2023 Share Posted June 23, 2023 I'm trying to make a "pinned" section structure (as for the example in documentation), it works pretty good, unless i add something inside a section and i animate it with another scrolltrigger. First section is correct, also the scrolltrigger animation of its content, but when i reach the second section a "blank" with the size of the page itslelf appear on the left. If i remove the scrolltrigger animation inside everything is working correctly at this url you can see an example: https://codesandbox.io/p/github/popeating/next.popland.it/draft/dank-sunset as you can see the "hello" text is growing as you scroll, but when the second section take over, the horizontal bar appear gsap.to(".txt", { scrollTrigger: { trigger: ".txt", scrub: true, start: "middle top", markers: true, pin: true, pinSpacing: false, }, scale: 6, duration: 1, }); if i comment or remove the code above and it works again (i also tried to modify it with various pin combination with no luck) i guess there is something about having a scrolltrigger inside a pinned scrolltrigger that i cant figure out any suggestion? Link to comment Share on other sites More sharing options...
giovannimalausa Posted June 23, 2023 Share Posted June 23, 2023 Hey, your link takes here! Link to comment Share on other sites More sharing options...
popland Posted June 23, 2023 Author Share Posted June 23, 2023 can you try this one? im able to open it with an incognito window https://codesandbox.io/p/github/popeating/next.popland.it/draft/dank-sunset?file=/pages/index.js:1,1 Link to comment Share on other sites More sharing options...
Rodrigo Posted June 23, 2023 Share Posted June 23, 2023 Hi, You are animating an element using ScrollTrigger that is inside a pinned element, so you have to consider that particular offset using pinnedContainer. Also you have nested pinning, that is an element pinned inside a parent element (somewhere up the DOM tree) that is also pinned. That could cause some issues down the line and since you're adding an extra element (a pin spacer element) you're creating horizontal overflow. Also you have a syntax error in your start point string: // Incorrect start: "middle top", // Correct start: "center top", In this case is just better to either don't pin the text element and pin the parent: panels.forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: "top top", pin: true, pinSpacing: i > 0 ? false : true, markers: true, }); }); gsap.to(".txt", { scrollTrigger: { trigger: ".txt", scrub: true, start: "top top", markers: true, id: "text", }, scale: 6, duration: 1, }); Although my approach would be to create the animation inside the panel loop. Instead of creating a ScrollTrigger instance, create a Tween or Timeline with that specific ScrollTrigger configuration if the panel has that specific children: panels.forEach((panel, i) => { // you could look at a data attribute or something else if (panel.dataset.hasChild) { gsap.to(".txt", { scrollTrigger: { trigger: panel, start: "top top", // By default pin spacing is true pin: true, markers: true, scrub: true, }, scale: 6, }); } else { ScrollTrigger.create({ trigger: panel, start: "top top", pin: true, pinSpacing: false, markers: true, }); } }); Finally the simplest way to remove the horizontal scroll bar is to just add Tailwind's overflow-hidden to that parent element: <section className="panel w-full h-screen bg-slate-400 overflow-hidden"> <div className="flex justify-center h-screen w-full items-center txt"> HELLO </div> </section> Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
popland Posted June 24, 2023 Author Share Posted June 24, 2023 Thank you! will look into it, i think i will follow your last advice not much in favour of 'overflow-hidden" solution, was hoping not to have a the scrollbar in a native way, but in any case i will try it too, Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now