Liridon Posted January 29 Share Posted January 29 I'm having issues using ScrollTrigger and ScrollSmoother with scrollTo function on pinned element. I need the left side items to follow the right side sections, to do that I pinned the section, but then triggering scrollTo on click doesn't work as it should, and never lands on the right place. If you change the codepen view to vertical, you can see the issue better. Thanks in advance. See the Pen vYPpaYe by liridond (@liridond) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted January 29 Solution Share Posted January 29 Hi @Liridon and welcome to the GSAP Forums! I don't have time now to dig into your setup but when you use pinning the anchor position is not really a reliable way to get the vertical scroll position of the elements. Maybe these demos can help you to see how is done: See the Pen RwvNamq by GreenSock (@GreenSock) on CodePen See the Pen xxjErmp by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Liridon Posted January 30 Author Share Posted January 30 @Rodrigo the first solution seems to fix most of it, now the scroll isn't jumping too far, but sometimes it still doesn't get exactly to the element leaving a little space in the bottom or at the top. Do you think I should try the second solution for this fix or is the problem somewhere else. I updated the code pen to work with the provided first solution. Thanks a lot for your help. Link to comment Share on other sites More sharing options...
Rodrigo Posted January 30 Share Posted January 30 Hi, This works: nav_links.forEach(function (nav_link, i) { nav_link.addEventListener("click", function (e) { e.preventDefault(); const st = tween.scrollTrigger; gsap.to(window, { scrollTo: { y: st.start + 11 - (8 * i) + (st.end - st.start) * (i / (nav_links.length - 1)), autoKill: false }, duration: 0.5 }); }); }); Now this part makes me uncomfortable: st.start + 11 - (8 * i) The 11 is due to half the padding you have plus the border that's ok, but the 8 factor is what's normally called a magic number and, while it works, it might not be a reliable workaround, so you should investigate the reason for it: See the Pen XWGZpLp by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 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