thehaes Posted July 11, 2021 Share Posted July 11, 2021 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 More sharing options...
iDad5 Posted July 11, 2021 Share Posted July 11, 2021 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 More sharing options...
thehaes Posted July 11, 2021 Author Share Posted July 11, 2021 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 More sharing options...
iDad5 Posted July 11, 2021 Share Posted July 11, 2021 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. 1 Link to comment Share on other sites More sharing options...
iDad5 Posted July 11, 2021 Share Posted July 11, 2021 One follow up question: Do you have a version without the custom-scroll script that works, even if clumsy? maybe that could help narrowing it down... Link to comment Share on other sites More sharing options...
OSUblake Posted July 11, 2021 Share Posted July 11, 2021 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 1 Link to comment Share on other sites More sharing options...
thehaes Posted July 12, 2021 Author Share Posted July 12, 2021 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 12, 2021 Share Posted July 12, 2021 Maybe you'll have some luck in the three.js forums?https://discourse.threejs.org/ Link to comment Share on other sites More sharing options...
OSUblake Posted July 12, 2021 Share Posted July 12, 2021 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); }); 1 Link to comment Share on other sites More sharing options...
thehaes Posted July 13, 2021 Author Share Posted July 13, 2021 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 More sharing options...
OSUblake Posted July 13, 2021 Share Posted July 13, 2021 52 minutes ago, thehaes said: I'm trying to get the custom scroll from my codepen to work with scrolltrigger. I get that. I'm trying to get you to NOT use it. 😉 I've already described a smooth scroll method that works with three.js. See the Pen MWmbZQv by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
GreenSock Posted July 13, 2021 Share Posted July 13, 2021 2 hours ago, thehaes said: whole website gets choppy and framrate drops a lot. If you just mean that the scrolling is choppy, you probably forgot to call ScrollTrigger.update() whenever your custom scrolling script renders. Link to comment Share on other sites More sharing options...
thehaes Posted July 13, 2021 Author Share Posted July 13, 2021 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 More sharing options...
pattocheu Posted December 27, 2021 Share Posted December 27, 2021 @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 More sharing options...
OSUblake Posted December 27, 2021 Share Posted December 27, 2021 3 hours ago, pattocheu said: in order to avoid "Sync problem" with a smooth scrolling and Three.js you can use Asscroll librairy It works the same with just GSAP. See the Pen 874833fdebc032bedd0cf61e9eac3ee9 by ashthornton (@ashthornton) on CodePen 2 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