Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

thehaes's Achievements

  1. I think it's related to how mobile safari on iOS works, when you scroll up or down, sometimes the browser adress bar or bottom nav bar dissapears/appears which is resizing the browser, meaning the positions are being recalculated. That's why you see the flash, because the content is moving. I hope I explained that right. You should try using gsap scroll smoother (has the same options like locomotive scroll) and also try normalizeScroll(). If this doesn't work, then there's another option using css and 2 lines of js, but it will force the browser to always display navbar and adress bar and also you won't be able to scroll to top by tapping top edge of the screen like you normally do.
  2. Ah yes, told you I was tired - such a noob mistake 😝 I fixed the codepen now and it's working! The only thing left for me is to fix that autoscroll is not resuming after you scroll and move your cursor away from box, while the animation didn't come to stop yet.
  3. Awesome, thanks @Cassie! I've managed to make it work with your help, it works on my localhost, but somehow doesn't work on codepen: https://codepen.io/thehaes/pen/RwQVXYd - looks like it cannot find dom element? I tried with adding window.onload but it spits out same error. Weird. Can you also point me which line is responsible for scroll velocity? It is late so I might be tired but I can't see it. I want to be able to control how fast the slider is scrolling left/right with mouse wheel. EDIT: I found it!, it's in this line on 'wheel' event: loop.timeScale(event.deltaY); Just need to divide it by some numer (the bigger the slower it will be while scrolling), so for example: loop.timeScale(event.deltaY / 10); Again, huge thanks for pointing me in the right direction.
  4. I was looking for exact same thing like in your codepen and I was so happy, then I realised it's with react, and unfortunately I have no idea about react...All I know that useEffect is react-specific hook (I think). Is there a version of this without using react? I tried to modify it myself (I thought I will just take out everything out of useEffect function and remove building of structure (as I already have structure in html) will work, but I was too naive to think it would be this easy. If there's no version of this without react, can anyone point me in right direction and: 1st - confirm that it's just about the first function I should look at, and leave horizontalLoop alone? 2nd - My second guess is that it's about useRef() and root in the App function? I will appreciate any kind of help.
  5. 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 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
  6. 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
  7. 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
  8. Thanks for the reply @iDad5 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. 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
  9. 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.