Hema Nath Posted June 28 Share Posted June 28 This is a minimal demo of how the website I am creating might look like, there is more content in each container, but for the sake of minimalism, I have removed all of it. The main issue is that: 1. The anchor links are not working. 2. If I use touchpad and scroll left and right(horizontally) and then scroll top to bottom(horizontally), the gsap is getting triggered from where I left off and then its scrolling even when there is no content to the right. 3. It is pushing my last container to the top after I scroll there. See the Pen pommoBa by Hema-Nath-Reddy (@Hema-Nath-Reddy) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted June 28 Share Posted June 28 Hi there! Your container housing your panels has overflow:scroll on the x axis, so you can scroll vertically and also horizontally. That's causing the 'swipe' issue. Here's a demo showing the correct setup for anchor links and fake horizontal scrolling. See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen Hope it helps! Link to comment Share on other sites More sharing options...
Hema Nath Posted June 28 Author Share Posted June 28 Hi I have taken the code, modified it according to my website. Now the anchor links and the horizontal scrolling are working, but once a click on a link, I am unable to scroll to the containers before it and on top of that, it is allowing me to scroll past the last container. This is the new gsap for your reference: document.addEventListener("DOMContentLoaded", (event) => { gsap.registerPlugin( ScrollTrigger, ScrollToPlugin, RoughEase, ExpoScaleEase, SlowMo, CustomEase ); let panelsContainer = document.querySelector(".container"), tween; document.querySelectorAll(".anchor").forEach((anchor) => { anchor.addEventListener("click", function (e) { e.preventDefault(); let targetElem = document.querySelector(e.target.getAttribute("href")), y = targetElem.offsetTop; if (targetElem && panelsContainer.contains(targetElem)) { let totalScroll = tween.scrollTrigger.end - tween.scrollTrigger.start, totalMovement = (panelsContainer.children.length - 1) * targetElem.offsetWidth; y = Math.round( tween.scrollTrigger.start + (targetElem.offsetLeft / totalMovement) * totalScroll ); } gsap.to(window, { scrollTo: { y: y, autoKill: false, }, duration: 1, }); }); }); let sections = gsap.utils.toArray(".bodyb > .container"); ScrollTrigger.defaults({ markers: false, }); tween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".bodyb", pin: true, scrub: 1, snap: 0, end: () => "+=" + document.querySelector(".bodyb").offsetWidth, }, }); }); Link to comment Share on other sites More sharing options...
Cassie Posted June 28 Share Posted June 28 Please can we see a minimal demo showing the issue? Just click fork on the demo I linked to (bottom right) and then add your code and post it here. It makes things a lot easier for us to help you. Thanks! Link to comment Share on other sites More sharing options...
Hema Nath Posted June 28 Author Share Posted June 28 See the Pen BaeeRVE by Hema-Nath-Reddy (@Hema-Nath-Reddy) on CodePen Having observed the way it works, I think clicking on an anchor link is moving the horizontal scroller instead of the vertical scroller unlike how it is working in the minimal demo you provided before. Link to comment Share on other sites More sharing options...
Hema Nath Posted June 28 Author Share Posted June 28 12 minutes ago, Hema Nath said: Here is the demo: Minimal demo. Having observed the way it works, I think clicking on an anchor link is moving the horizontal scroller instead of the vertical scroller unlike how it is working in the minimal demo you provided before. I mistakenly placed another link and tried editing it, for some reason, the link is not working. So I am quoting the reply and pasting the minimal demo link here. See the Pen BaeeRVE by Hema-Nath-Reddy (@Hema-Nath-Reddy) on CodePen Link to comment Share on other sites More sharing options...
Hema Nath Posted Thursday at 11:04 AM Author Share Posted Thursday at 11:04 AM So just to give an update of what's going on and the new issue I'm facing. In the above demo, when the anchor links are clicked, it is triggering the horizontal scroll bar instead of the vertical scroll bar. To avoid that, I have used <p> tags in the place of anchor tags because they don't have the ability which anchor links have. And I have added an onclick event to each of the <p> tags which is supposed to take you to the right place, but the problem is that the scroll isn't enough or it is not scrolling to the right place. This is the minimal demo: See the Pen vYqBXmw?editors=1010 by Hema-Nath-Reddy (@Hema-Nath-Reddy) on CodePen Please help me out. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted Thursday at 09:45 PM Solution Share Posted Thursday at 09:45 PM Hi, Basically there is an issue in the math you were using to set the scroll distance you're passing to the ScrollTo Plugin. This seems to work the way you intend: See the Pen WNqeEap by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Hema Nath Posted Friday at 04:18 PM Author Share Posted Friday at 04:18 PM Thank you so much. It works perfectly fine now. 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