PSMAyhan Posted October 9, 2022 Share Posted October 9, 2022 I have a horizontal webpage and I wanted to implement a rowjumper.However, gsap.scrollTo() doesn't seem to work together with ScrollTrigger on a horizontal webpage. Does anyone know how I can implement this rowjumper? I'm happy about any help See the Pen PoeyvPQ?editors=1010 by PSM-Ayhan (@PSM-Ayhan) on CodePen 1 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 9, 2022 Solution Share Posted October 9, 2022 Hi @PSMAyhan and welcome to the GreenSock forums! The ScrllTo Plugin is doing exactly what is supposed to do, the problem is that the top position of all your sections is zero, hence the scroll bar doesn't move a single pixel. Since you are implementing a horizontal animation, based on a vertical scrolling page, the best approach is to get a scroll amount for each section. Also is critical in this type of setup that the animation that moves the content horizontally has a linear ease, otherwise getting the right values for the scroll position of each section can become quite a difficult task. This seems to do what you're after: const wrapper = document.querySelector(".wrapper") const move = (wrapper.offsetWidth - document.body.offsetWidth) * -1 const links = gsap.utils.toArray(document.querySelectorAll("a")) const scrollPerLink = (document.body.clientHeight - window.innerHeight) / (links.length - 1); links.forEach((link, index) => { link.addEventListener("click", function() { gsap.to(window, { duration: .5, scrollTo: (scrollPerLink * index), }) }) }) gsap.to(wrapper, { scrollTrigger: { scrub: 1, }, x: move, ease: "none", // <- NO EASING, SUPER IMPORTANT }); Finally if you're looking for some complex animations on each panel you can use the Container Animation feature: See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen Happy Tweening! Link to comment Share on other sites More sharing options...
PSMAyhan Posted October 9, 2022 Author Share Posted October 9, 2022 Thank you It works just fine 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