ScrollTrigger doesn't work since i installed webpack...

[nightcoder]

Hello!!

I have a quite heavy question

I'm working on my portfolio website using ScrollTrigger / horizontal scrolling.

Everything was working absolutely fine until i installed webpack in the project recently.

I needed to install it because i also use barba.js for transitions and webpack makes it so easier to handle the scss from page to page when clicking a link to go to another page of the site (no need to code for stylesheet injection in the head tag of the new html page when a link is clicked).

And indeed it's working! 

BUT very oddly, when starting the project, now i do not land at the top of the page but somewhere in the middle and it's impossible to scroll!

ScrollTrigger seems to be the issue here, because the barba transitions are working fine...

What happens is: when landing on the page, i see a short flash of the raw html starting from the top (cool) and then (when the JS file is loaded) i get to a certain portion of the website, depending on the xPercent i put in my horizontal-scrolling function...(xPercent: -100 gets me at the 1st section, -200 at the second, -300 at the middle of the site etc... and impossible to scroll.)

I tried everything and cannot figure out why/how to fix this.

 

Would you have an idea why this is happening?

Any help/hint/link would be highly appreciated!

i learned a lot from this forum sofar, maybe my case can help someone else in the future ^^

 

Thank you!

 

ps: my html and js files are very long, i hope i'm not too much of a hassle...

ps2: here is a link to a tweet i posted in december where you can see the scrolltrigger/horizontal scrolling working smoothly in the project. (https://twitter.com/Nightcoder2/status/1333666647429816320)

 

 

[GreenSock]

We'd love to help, but reading through 500+ lines of copy/pasted code that's not even in context is beyond the scope of the help we provide in the free forums, especially since it sounds like this isn't directly related to GSAP (you mentioned it only happened after you started using Webpack). I can assure you GSAP works great with Webpack, so it's not like anything is incompatible. 

 

If you still need help, here are some options:

1. Try to recreate the problem in a MINIMAL demo (not your real project - just try getting one <div> to move or something). Often when you strip things down like that, the problem becomes much more apparent. If it's still broken in that minimal demo, you could maybe put that into a CodeSandbox or send us a link to a Github repo that we can install/run to see the error. 
2. Hire a consultant/freelancer expert. 

Good luck!

[nightcoder]

Thank you so much for replying so fast!!!

Yes indeed i should definitely break the project down in smaller pieces and find the issue that way.

It's also helpful to know that there isn't anything special to do when using gsap with webpack!

So it might come from my webpack config or somehting like that... I'll be my own expert freelance consultant LOL (since i want to become a developer, it's part of the learning journey isn't it?) and i'll investigate further!

I'll post a github link if i'm still stuck in a few days, or the solution to my problem once i solve it!

thanks again for your kind reply!

cheers

[ZachSaucier]

15 hours ago, nightcoder said:

I'll post a github link if i'm still stuck in a few days

An even better thing would be to provide a minimal demo in a CodePen or CodeSandbox.

[nightcoder]

i finally found the solution and totally forgot to come back here to give some news!

So indeed ScrollTrigger works like a charm with webpack, no problem at all.

The issue came from my webpack.config.js file and the way i used to bundle my scss files!

All is fixed now that the scss files are bundled nicely, no more weird behaviour of ScrollTrigger.

Moral of the story: webpack can be quite confusing when using it for the first time! But really good way to learn more and make progress!

Cheers to you all and thank you Jack and Zach for replying to me so fast when i first posted!