[Having an issue with ScrollTrigger + Locomotive Scroll]

thanks @OSUblake for the help 🙏🏾

[Having an issue with ScrollTrigger + Locomotive Scroll]

hey @akapowl thank you for the detailed explanation. I understand the current behavior more clearly now.

 

About the smooth scroll, yeah, I know. I'm only using Greensock's smoothscroll helper on mobile because the desktop view is all horizontal.

 

16 hours ago, OSUblake said:

Pretty sure you could just setup a scroll proxy for that. I'll mess around with that in a bit.

Hey @OSUblake, not to bug, but did you manage to try it out, eventually?

[Having an issue with ScrollTrigger + Locomotive Scroll]

@OSUblake & @akapowl thanks for all the help so far. I removed locomotive scroll and implemented the horizontal and smooth scrolling with scrolltrigger as you suggested and they worked great. Well, except for the trigger on the element. Which seems stay at the point where the object is on load but doesn't follow the object on scroll, and additionally, weirdly goes upwards as I scroll. See codepen here 

 

See the Pen YzZMepa by tobijudah (@tobijudah) on CodePen

[Having an issue with ScrollTrigger + Locomotive Scroll]

thanks, everything is set up now, including the scrollerProxy
see here: 

See the Pen YzZMxMr?editors=0011 by tobijudah (@tobijudah) on CodePen

[Having an issue with ScrollTrigger + Locomotive Scroll]

thanks @Shehzad Asif 
added the loco css to my codepen now and horizontal scroll works well, but annoyingly, my content is still laid out vertically for some reason. 

[Having an issue with ScrollTrigger + Locomotive Scroll]

yeah about scroller proxy, i removed it so I could figure out first why the horizontal scroll wasn't working properly

[Having an issue with ScrollTrigger + Locomotive Scroll]

silly question but this is where I add the Loco CSS right?

[Having an issue with ScrollTrigger + Locomotive Scroll]

meanwhile @OSUblake I've managed to set up a small(?) demo here: 

See the Pen JjWVKMz?editors=0011 by tobijudah (@tobijudah) on CodePen

But this time the horizontal scroll isn't even initiating for some reason. Trying to see if I missed something.

[Having an issue with ScrollTrigger + Locomotive Scroll]

hey @akapowl thanks for the reply. just tried that out and it completely breaks the layout for some reason

[ScrollTrigger Breaks on Resize Using Recommended Locomotive Approach (data-scroll-section)]

wrong thread sorry 😬

[Having an issue with ScrollTrigger + Locomotive Scroll]

Hey @OSUblake, thanks for responding. Let me minimize the code to help make debugging and helping easier. Will reply as soon as I've done that.

Yes, I am. As for the horizontal scroll, as soon as I instantiated the scroll, I stopped it scroll.stop(), then the full screen video plays for 10 seconds before I start it, scroll.start(). So if you try to scroll during the first 10 seconds it won't work. After that everything is as normal, including mouse wheel scrolling.

[Having an issue with ScrollTrigger + Locomotive Scroll]

here is the page link from the sandbox: https://ncfh6.sse.codesandbox.io/

[Having an issue with ScrollTrigger + Locomotive Scroll]

I think I've properly setup ScrollTrigger with locomotive scroll using some examples seen in the forum, however I can't seem to get my animation to work properly. It triggers as soon as the page loads without me scrolling to the point I set my trigger.

here is a codesandbox link. https://codesandbox.io/s/cocky-darkness-ncfh6?file=/src/components/SectionThree/SectionThree.tsx

sorry I couldn't use codepen. don't know if that's fine?

 

edit: relevant files: App.tsx, SectionThree.tsx, instantiateScroll.ts

[When I try to npm install in github actions, I get an error saying that the file cannot be found.]

Thanks Zach, I'd just revert to the gsap-bonus.tgz file in this case, instead of using the private NPM registry.

[When I try to npm install in github actions, I get an error saying that the file cannot be found.]

to be clear, making these public isn't a big deal, yes? 
and thanks for your responses

[When I try to npm install in github actions, I get an error saying that the file cannot be found.]

not really. I'm aware I shouldn't put the bonus file in a public repo. So I've installed it using this method as shown in this video => 

My question is my auth token will be accessible in the .npmrc file if I make my repo public. So is that safe? If not, how can I hide my auth token in the .npmrc file

[When I try to npm install in github actions, I get an error saying that the file cannot be found.]

Hello, I installed the gsap-bonus file from the private registry using yarn. Is it safe to make the code public with my .npmrc config file which contains my auth token? And if not how can I go about it?