Nextjs 14 with GSAP scroll trigger new ISSUE

[Umanga Bhattarai]

Hello GSAP community, 
My Next.js, GSAP, tailwindcss app, version is mentioned below,

"gsap": "^3.12.5",

"next": "14.2.4",

"@gsap/react": "^2.1.1"

I have encountered while implementing GSAP ScrollTrigger with useGSAP hook, 2 issues i encountered.
1. Until and unless i set markers as true, the scroll trigger animation does not happen which means that the page is still there is no scroll. when i set that to true then scroll animation happens.
2. it has a weird behaviour before the scroll animation or before the start reaches the scroll-start the component is black or the screen becomes black and on end too it becomes black
I have spend days on this problem and could not find a solution over here.
I have searched everywhere but there is no such problems that i am facing.

Here is my files that might be needed to solve this issue.
 

index.tsx SectionScrollFirst.tsx FeatureAbout.tsx

 

_app.tsx package.json _app.tsx

page.js

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Umanga Bhattarai]

Hey there,
It took effort but here is the link
https://stackblitz.com/edit/stackblitz-starters-ojmzi7?file=src%2Fpages%2Findex.tsx

you can download this project and run it the issue is that scrollTrigger adds a scrollbar which should not appear in the home page.
At first it added both the horizontal scrollbar and vertical ScrollBar.
But you can see there i did a weird fix to remove the horizontal scrollbar using calc(100vw-15px) i think the 15px is the vertical scrollbar width.
but i could not remove the vertical scrollbar.
Also this issue doesnot appear at first i don't know why but after certain time only the scrollbar appears. By certain time i mean 15mins or so
Please Please Please help me with this i am really frustrated with this.
Also this project is hosted in my github pages here is the link for further detail
https://bumang.github.io/portfolio

[Rodrigo]

Hi,

 

Sorry about the issues and the frustration, but there are a lot of files in your project, the Stackblitz is not working (tried in chrome and firefox) and we don't have the time resources to go through all that and find the one file that could be causing the issue or problem you're seeing, that's why we ask for a minimal demo (emphasis on minimal). On top of that waiting for 15 minutes for something to fail is a bit odd to say the least.

 

Finally what I can advice you is to never use 100vw in your elements specifically because of the horizontal space the scroll uses, which is not a standard amount of pixels, so using 15 pixels could work in some browsers, with some themes and in some OS, but there is no guarantee that this is something 100% standardized across every browser on every OS, so thread carefully with that particular fix.

 

Sorry I can't be of more assistance 😞

Happy Tweening!