jacksmug

Hi @mvaneijgen, I understand what are you trying to say but at the moment i'm still new to Javascript and I don't have enough experience on it currently. Thanks for your reply and here's the proper demo i've created, cleaner and straight to the point. Now I already have the horizontal scroll but I want to add fade animation for each of the item when scrolled. Thank you! https://codepen.io/syedzaquan/pen/bGObeEP

Hi everyone, how can I add fade out to each of the section after almost finish sliding here? I tried to put autoAlpha to this part gsap.to(sections, { y: -120, autoAlpha: 0, ease: "none", scrollTrigger: { trigger: sections, containerAnimation: scrollTween, start: "center 80%", end: "center 20%", scrub: true, id: "2" } }); But it doesn't work, it will fade out the whole container. Somebody can help me what am i doing wrong here? https://codepen.io/syedzaquan/pen/poqzvvr

Hi I follow the example provided by @Rodrigo. But I want to add title and pinned the title with card stack section, yes the title pinned for now but all the cards are going down with the scroll. Can you guys help me? Thank you so much. Here

Yes, i'm sorry that i've been using CDN from this codepen example. The issue now fixed already by updating to latest CDN. https://codepen.io/GreenSock/pen/oNLqgBm Thank you @OSUblake & @GreenSock(Jack)!

Hey guys, I need your help and maybe it's quite general issue. After a long time I am not touching my project, my project is broken and got an error inside 'Console'. Here's the error: I cannot scroll down my page and seems like ScrollTrigger is not functioning. Not sure what happened. I am using ScrollTrigger version 3.10.0 and I tried to update to latest version. Still get this issue.

I see, yes it worked too. Thanks @OSUblake!

Hi @Cassie, sorry it's me again. But how about when I scroll up? Is there any value that I can use to determine the scroll direction is going up/down? So maybe I can do something like this: if (value > 0.123 && value < 0.203 && scrollup === true) EDIT: Ah nevermind, i've found the solution. I added this on 'onUpdate:' to add class whenever we scroll up/down using self.direction onUpdate: self => { if (self.direction === 1) { scroller.classList.add('scrolling-down'); scroller.classList.remove('scrolling-up'); } else { scroller.classList.add('scrolling-up'); scroller.classList.remove('scrolling-down'); } console.log("direction:", self.direction) }, And once the class changed on scroller, I just put it in if else condition on 'snapTo' if (value > 0.123 && value < 0.203 && scroller.classList.contains('scrolling-down')) Thank you guys!

Hi @Cassie! Ah, now I get it. It's working! Responsive also working fine. Thanks a lot @OSUblake & @Cassie for helping me out! So I get each scroll position manually from console.log, yeah maybe not a best way but I still able to achieve what I need. Thank you! snapTo(value) { console.log(value.toFixed(3), window.scrollY); if (value > 0.123 && value < 0.203) { return 0.232; } else if (value > 0.529 && value < 0.580) { return 0.655; } else if (value > 0.734 && value < 0.778) { return 0.915; } else { return value; } }

I am sorry Blake, im a beginner in Javascript. That means 'value' represent scroll position? I tried like this: snapTo(value) { if (value > 2000) { bodyScrollBar.scrollTop = value; return value; } return value; } And nothing happens. Then I tried something like this: snapTo(value) { console.log(bodyScrollBar.scrollTop) if (bodyScrollBar.scrollTop > 1900 && bodyScrollBar.scrollTop < 2600 ) { bodyScrollBar.scrollTo(0, 3400, 1000); } } It make sense a little. Once I scroll between 1900 until 2600, it will go to the next section(3400) but after it snap, it jump back to the first section on the top.

Thank you @OSUblake, but how can I declare variable for 'value' since I am using 'smooth-scrollbar' and cannot use window offset?

Hi everyone, I have a question here, is there any possible way to start the snap at the end of a section (not at the start of a section)? Because as you guys can see in the codepen, it scroll the whole section until end of section. So there's no chance for the user to read the text in each section. Not sure if my code isn't implemented correctly. What I am going to achieve is, the user still should be able to control the scroll in order for them to read the text. Here's a visual reference for you guys in the attachment, hope it helps. Thank you! *in this pen, I use Scrolltrigger with smooth scrollbar