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

Hi @Rodrigo this looks exactly what i'm after. Is there an example of how to tie this to a timeline? Potentially using it to scrub a timeline at all/update the progress? I will have a play around in the meantime! Thanks, Jack

Hi there, I am wondering if someone can point me in the right direction for my scenario below. The idea I have is basically the ability to click a column which expands full width, revealing what's within that column. That part is fine, however I would like to then be able to scroll horizontally within that column to show the other items. The sticking point I have - I am using Lenis (I know this is a third party ?) to pause the scrolling/add overflow hidden to the body, and was wondering if there's a tool of sorts which will allow me to scroll that active container? The reason I want to pause scrolling is to make this act as a takeover, so you have to scroll within this column or close it to be able to carry on scrolling up/down the page. I have tried to create the closest demo possible of what I have so far which I hope helps show better of what i'm trying to achieve and if there's anything in the GSAP world which can help me achieve this! Thanks, Jack

Hi @Rodrigo, Tested this out and works perfectly, thank you very much for the help! Jack

Hi @Rodrigo, Sorry I have forked your example and updated it to use the layered pinning to best show below. Removing the pinSpacing is to get this effect where the next section overlays the previous one: https://codepen.io/GreenSock/pen/KKpLdWW So I tried to do the same here but no luck sadly - I tried increasing the end value but no dice https://codepen.io/jackkemm/pen/abaLqrE Thanks, Jack

Hi @Rodrigo, This is amazing. I think I got stuck in a rut and went way off-piste lol. How would I account for the layered pinning here though? And pin long enough to see all the text? I have added in the layered pinning check pinSpacing: index === sections.length - 1 to remove the pin spacing from all but the last one. But this prevents the items from being visible now ? Thanks, Jack

Hi there, I am using the layered pinning effect for some sections, but have run into an issue with my text overlay animation when trying to delay the pins from moving on. I used this example which sets an end value on the ScrollTrigger, and adds a margin to offset the pins I assume: https://codepen.io/akapowl/pen/RwJwpvo For my animation to work, the layered pinning works perfectly, but i'm not 100% sure with this offset to allow for the delay, how to make my overlay text animate in & out correctly. The idea is it scrolls up into view from 0 to 1 opacity, then continues off back to 0 opacity, but the positioning looks way off, and it's super fast. There is also the need for it to be adaptable as there can be more than one content section within a pin - this I can work out i'm sure once I have figured out the correct spacing/offset. I have attached a simple example built around it being used as a module/block to show where I am at with it. Here is an example of what I managed to do without layering the pins which works how i want it to - the image container is pinned while the text scrolls naturally over the top: https://codepen.io/jackkemm/pen/wvEqVYE Any thoughts on this? Thanks, Jack

Hi @Bahaa, I had a go at your code following on from what @GSAP Helper said about the use of fromTo(). To animate, there needs to be a from value, so I am just using the current innerText of the caption div/span to give it a place to animate from. Also to note, your captions were all the same too so I added a number to them to visually show they're changing too. See below: https://codepen.io/jackkemm/pen/bGxrNBj Thanks, Jack

Hi @mvaneijgen, That's perfect, no need to calulate the height/width of the browser now ? Thanks for your help guys! Thanks, Jack

Hi Cassie, I have done another example closer to what I am working on: https://codepen.io/jackkemm/pen/JjaNmEa I tried invalidate()previously, but I was setting the original transform for the text elements in CSS rather than using a fromTo in my timeline which was breaking the animation when triggering it again?‍♂️ Looks like that was the answer after all! Thanks guys. Jack

Hi @mvaneijgen thanks for the answer. I understand that thought you have about resizing, but in my case I would like to make this work flawlessly if a user does decide to resize so the animation works just as good. I have used gsap.matchMedia() before, but in this instance I am updating the value on resize. I plan to change the values on resize so there's no defined value to be within a break point (sorry Codepen was a bad example in the end lol). Have updated the Codepen to show better what I am after. The values will be based on window.innerWidth for example and naturally these update on resize. Thanks, Jack