jackkemm

Morning @Rodrigo, I had my concerns Lenis may have been causing the lagging 🤦‍♂️ I'll give the recomendation a go and report back. And thank you for considering putting something in place within Observer, it feels like a unique issue so i'm grateful!

Thanks @mvaneijgen! So that works the same as using preventDefault: true for me, but the mousewheel (on a logitech mouse for example) still has some type of dampening when scrolling over the container sadly. I appreicate your help so far!

Hi @mvaneijgen, Thank you for the quick review! May have helped saying what browser I am using lol - I was looking on Firefox and I get the issue described above, can confirm it works fine in Chrome and Safari. I wonder what Firefox might be doing differently for this? Updated: Should probably also say the apple mouse is fine, but the mousewheel feels like it has some sort of throttling when scrolling over it in Firefox 😕 Thanks, Jack

Hi there, I am using the Obsever plugin to allow a user to zoom in/out on a container using the `ctrl` key. The idea is that when you scroll over the container, you will need to hold the `ctrl` key to be able to zoom in/out. The issue I am having is the page scrolls up and down when the user holds the `ctrl` key, rather than just the zooming. I tried using `preventDefault: true`, but naturally this prevents any sort of scrolling over the container. I did think it was Lenis at first as I am using this for a smooth page scroll, and the page was scrolling still albeit very slowly, but this is because Lenis handles scrolling differently I think 🤷‍♂️ My question is, is there a way to stop the page from scrolling using Observer when a user hits the `crtrl` key, or is this a more general JS question? Thanks in advance. Jack

Hey @Rodrigo, Thanks for the update. Sadly it only seems to scroll in one direction mainly, it will randomly go in the opposite direction when scrolling up. I made a tweak to the line below to make sure the currentDirection was being used to make sure the columns went the opposite direction when scrolling up/down: // Changed this line currentScale = (i % 2 ? 1 : -1) * -1; // To this line currentScale = (i % 2 ? (currentDirection * -1) : currentDirection); Thanks a lot for your help @Rodrigo. Thanks, Jack

Hey @Rodrigo, That's perfect to get me on the right track. The endless loop here is needed so this is great. The only thing I need to do now is to stop it when the scrolling stops ? So only move the columns in the direction of scroll when scrolling but I can have a play hopefully crack it. Thanks, Jack

Hey @Rodrigo, Thanks for getting back to me. Fully understand that! I have however cracked it in the meantime thank you. I have tapped into ScrollTrigger.isTouch to work out if the device is a touch device and I am reversing the calcs for touch devices. I also gave a go at implementing the above example for the lerping and it works nicely. I think I was trying to overcomplicate things ? Here is the Codepen with the updates ? https://codepen.io/jackkemm/pen/RwearyE?editors=1011 Thanks again! Jack

Hi there, I was wondering the best way to tie this helper function up to ScrollTrigger and use the scroll velocity to scroll through/update the progress in the column? https://codepen.io/GreenSock/pen/MWXPgKm?editors=0010 I have attached a minimal demo using gsap.quickTo() but sadly isn't tied to the scroll correctly. Once I have worked this out i'm going to hopefully hook into the scroll direction so I can play it in both directions. But the first step would be making it work ? Thanks, Jack

Hey @Rodrigo, Thanks for the recommendations here! I have implemented them and everything is much smoother. My message above was about creating a lerp type of effect fpr the cards using the velocityY property - that's what that this chunk is trying to do using onUp or onDown: const posSetter = gsap.quickSetter(cards, "x", "%"); const clamp = gsap.utils.clamp(-20, 20); const lerp = [8, 16, 24]; const proxy = { x: 0 }; Observer.create({ target: cardItems, type: "wheel,touch,pointer", onUp: (self) => { let lapsedProgress; if (lapsedProgress === 1) return; lapsedProgress = scrollTl.progress() - 0.075; progressTo(lapsedProgress); const x = clamp((self.velocityY / -300) * lerp[Math.floor(Math.random() * lerp.length)]); if (Math.abs(x) > Math.abs(proxy.x)) { proxy.x = x; gsap.to(proxy, { x: 0, duration: 0.8, ease: "none", overwrite: true, onUpdate: () => posSetter(proxy.x) }); } }, }) I guess this is a better example of what i'm trying to do, but wanted to use the velocityY property: https://codepen.io/GreenSock/pen/wvMeNee?editors=0010 Do you think this is doable or should I go down the route of the above example? Here is the updated Codepen for reference: https://codepen.io/jackkemm/pen/RwearyE?editors=0011 EDIT: One thing I noticed too, on mobile/touch devices, the scroll is in the opposite direction. I have tried adding -1 to wheelSpeed and scrollSpeedfor touch devices but the scroll is still in the opposite direction. Is there a way to change this? Thanks, Jack

Hey, Thanks again for the above! I am trying to add some stagger to the cards on scroll using the velocityX property and have 3 values in a lerp variable to try stagger the velocity a bit. I am using the Skew example you guys have built to try get the desired effect but the velocity using the Observer plugin doesn't seem as smooth as the example linked above? Is there anything I'm missing here? https://codepen.io/jackkemm/pen/RwearyE Thanks, Jack

Hey @mvaneijgen can confirm that was the solution thank you. Threw it straight into my project and gave me the desired effect ? Thanks, Jack

Hey @mvaneijgen, You are a wizard. This looks to be the solution I am after ? I did try once but maybe because it's the same ScrollTrigger and I was killing it I was having issues with the effect I am after. I will give this a go and report back ? Thanks, Jack

Hi there, I am trying to create an animation where by the timeline only happens once when tied to a ScrollTrigger. The idea is the timeline will scrub to a point in the timeline where there is an onComplete callback which should pause the timeline and not let it happen again in any direction unless the user refreshes their page. I have tried killing/disabling the ScrollTrigger in this callback, but it causes a page shift to occur, plus I still need this section to pin even if the animation isn't scrubbing. Any ideas on how I can stop the timeline from scrubbing once this onComplete callback runs? I have attached a Codepen to hopefully give a better understanding of what i'm trying to achieve. Thanks, Jack

Hi @GreenSock, That was the one. Works perfectly thank you both @Rodrigo & @GreenSock ? Thanks, Jack

Hi @Rodrigo, This got me in the right direction thank you! I am doing similar, but updating the timeline progress using the onUp and onDown callbacks. I was wondering if there was a way to smooth the scroll a bit more and make it feel a bit more natural? I have an updated Codepen implementing what i've managed so far below: https://codepen.io/jackkemm/pen/RwearyE Thanks for the guidance so far ? Thanks, Jack