Jump to content
Search Community

Scrolltrigger issue with custom "smooth scroll" code

thehaes test
Moderator Tag

Recommended Posts

Hey all!

 

First of all, I am designer learning some dev style fighting and I am amazed how many possibilities gsap gives, I was a guy with job related mid-life crisis and gsap allowed me to find enjoyment and excitement, just as 15 years ago when I was just starting my design journey :) Thanks to everyone that participated and contributed to GSAP!

 

I decided to fight with my portfolio as this was perfect opportunity to practice coding and GSAP animations.

My issue is - I've been learning three-js with one of the courses available in the net there and wanted to use it when building my portfolio. There's a part in the course when the author shares his custom scroll code (which is needed to sync positions of meshes in webgl canvas with html divs). Now the hard part I've been fighting with for over a week now: I want to use gsap and scrolltrigger to animate stuff and I can't get this custom scroll to work with scrolltrigger - if I don't specify the scroller proxy it gets all choppy and framrate drops low and when I put scroller proxy the whole structure doesn't work. I've been trying putting different values/names in scroller proxy as part of trial & error, but nothing seems to work :( Before I wasn't using threejs I was using locomotive scroll and I figured out how to pair it with scrolltrigger pretty easily. But in this instance, I am kind of forced to use this custom scroll code.

 

I attach codepen (image not related :)) with one note - somehow the scroll doesn't work in the codepen, but it works on my localhost.

Hope I explained everyhthing well enough.

See the Pen XWRjxNw by mateusz-jaboski (@mateusz-jaboski) on CodePen

Link to comment
Share on other sites

Hi, I have looked at what you provided, and I have to admit, I didn't get far.

I'm hopeful for you that some of the greater minds here will be able to help you, but also I'm rather  sure this really isn't a gsap issue at the core.

 

You mention three.js but as far as I can tell it's not (yet) used in the example you provided (?) - and if I do understand you, you think that the three.js part will only work with the custom scroller you've been provided with. I myself have only toed with the idea of using three.js but didn't really use it up to today, but from following the discussions here I'm 100% sure that three.sj works well with gsap including scrollTrigger.

So I would think that probably it's a lot better to ditch the custom scroll code as scrollTrigger is a very powerful tool for most everything connected to scrolling and try to use it directly with three.js. This is just an educated guess, but using a powerful tool like gsap and scrollTrigger with another great library like thre. js should give you all the tools to do what you want putting the code that you 've been give in the middle seems to be more of a problem than a solution. Maybe if you could give the information what magic the custom scroller provides someone here can give you a hint how to accomplish ist without the drawback it seems to provide on top.

Link to comment
Share on other sites

Thanks for the reply @iDad5

Quote

You mention three.js but as far as I can tell it's not (yet) used in the example you provided (?) - and if I do understand you, you think that the three.js part will only work with the custom scroller you've been provided with. I myself have only toed with the idea of using three.js but didn't really use it up to today, but from following the discussions here I'm 100% sure that three.sj works well with gsap including scrollTrigger.

Yes, I'm not using it here, since I have only problem with connecting the scrolltrigger with this custom scroll. Gsap and scrolltrigger works well with three.js - I tested it already before.

Quote

So I would think that probably it's a lot better to ditch the custom scroll code as scrollTrigger is a very powerful tool for most everything connected to scrolling and try to use it directly with three.js.

I wish I could do that...it's just that if you're tracking the div position in html to translate it to position in webgl canvas, there's some issue with rendering which results in bad scrolling experience (things are not 'synced') and the only solution is to use some kind of scrolljacking and the guy who made the course recomennded his custom scroll code. So no, I can't get rid of it unfortunately :(

Link to comment
Share on other sites

Ok, that seems plausible to me, also great fan that i am of @GreenSock I have my doubts about anyone else having more powerful magic to force rendering engines into submission than him. ;-)

 

But it is possibel. ;-)

 

But I think that with this further explanation the great ones might be able to help you. I will follow the thread and if I have more time on my hands I'll give it try myself. 

  • Like 1
Link to comment
Share on other sites

Hi thehaes!

 

10 hours ago, thehaes said:

But in this instance, I am kind of forced to use this custom scroll code.

 

You're never forced to do anything. I'm not sure what you're trying to do, but I see nothing special in the code you posted. Just use the demo we already provide. 😉

 

See the Pen gOgWELo by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

10 hours ago, OSUblake said:

Hi thehaes!

 

 

You're never forced to do anything. I'm not sure what you're trying to do, but I see nothing special in the code you posted. Just use the demo we already provide. 😉

 

 

 

 

Thanks for replies guys. The problem is that if I use other custom scroll, I don't know how to translate the scroll position of the images to the position of meshes in webgl canvas (with the code in my example I know) and it starts to be an issue with threejs, which this forum is not about. I just thought there would be an easy way of configuring scrollerproxy with this custom scroll. I guess I'll try either with your method or locomotive and try to do it the other way

  • Like 1
Link to comment
Share on other sites

I still don't know what you're trying to do. What value are you trying to get?

 

In the demo I posted, you can easily grab how much it has scrolled like this.

 

let getProp("#content");

gsap.ticker.add(() => {

  let y = getProp("y");
  
  // update mesh
  
  // render three scene
  renderer.render(scene, camera);
});

 

  • Like 1
Link to comment
Share on other sites

11 hours ago, OSUblake said:

I still don't know what you're trying to do. What value are you trying to get?

 

In the demo I posted, you can easily grab how much it has scrolled like this.

 



let getProp("#content");

gsap.ticker.add(() => {

  let y = getProp("y");
  
  // update mesh
  
  // render three scene
  renderer.render(scene, camera);
});

 

Hey OSUblake, 

 

I'll try to rewrite my issue as I might cause some confusion:

I'm trying to get the custom scroll from my codepen to work with scrolltrigger. If I don't specify the scroller with scrollerProxy (and "scroller:" in gsap animation code), the start and end values don't exactly match (they almost match from what I can see) and whole website gets choppy and framrate drops a lot. The problem is I don't know what values I should put in the scrollerProxy code to get it work with that specific custom scroll code.

 

I hope it's more clear now

Link to comment
Share on other sites

Thanks a lot! @OSUblake, I'm going to try your solution by just modyfing three js in your example to see if maybe it's an issue of the shader I wrote, add some animations and get back with results :)

 

1 hour ago, GreenSock said:

If you just mean that the scrolling is choppy, you probably forgot to call ScrollTrigger.update() whenever your custom scrolling script renders. 

That's not it, I've tried it and no changes. But thanks for reminding me, that's the first thing I'll check after I'll do the updates

Link to comment
Share on other sites

  • 5 months later...

@thehaes in order to avoid "Sync problem" with a smooth scrolling and Three.js you can use Asscroll librairy ( https://github.com/ashthornton/asscroll )

 

Check this codepen :

See the Pen YzZzaVK by ashthornton (@ashthornton) on CodePen

 

and for using Gsap ScrollTrigger with Asscroll, this codepen :

See the Pen PoZRwPW by ashthornton (@ashthornton) on CodePen

Link to comment
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.
×
×
  • Create New...