Maria07 Posted May 8, 2023 Share Posted May 8, 2023 Hello! I am creating a scrollTriggered animation. The animation itself works fine, but when I use thumbs to control it usinge thumbs one slide skipps. Example is here See the Pen KKGQxYY by Maria2 (@Maria2) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted May 8, 2023 Solution Share Posted May 8, 2023 Hi @Maria07 and welcome to the GreenSock forums! This boils down to calculating the correct scroll position. In this cases using the offset or the element's position from the top might not always work, since ScrollTrigger adds some space for pinning elements. Is better to use the amount of sections (which normally coincides with the amount of links) and calculate that scroll position based on the start and end points of the ScrollTrigger instance and the index of each link element. const navLinks = gsap.utils.toArray(`${sectionAttribute} [data-point]`); const totalLinks = navLinks.length - 1; navLinks.forEach((link, index) => { link.addEventListener("click", (e) => { e.preventDefault(); if (index === 0) { return gsap.to(window, { scrollTo: { y: tl.scrollTrigger.start, } }); } if (index === totalLinks) { return gsap.to(window, { scrollTo: { y: tl.scrollTrigger.end } }); } gsap.to(window, { scrollTo: { y: tl.scrollTrigger.start + (tl.scrollTrigger.end - tl.scrollTrigger.start) * (index / totalLinks) } }); }); }); Here is a fork of your codepen: See the Pen jOezPLN by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Maria07 Posted May 9, 2023 Author Share Posted May 9, 2023 17 hours ago, Rodrigo said: Hi @Maria07 and welcome to the GreenSock forums! This boils down to calculating the correct scroll position. In this cases using the offset or the element's position from the top might not always work, since ScrollTrigger adds some space for pinning elements. Is better to use the amount of sections (which normally coincides with the amount of links) and calculate that scroll position based on the start and end points of the ScrollTrigger instance and the index of each link element. const navLinks = gsap.utils.toArray(`${sectionAttribute} [data-point]`); const totalLinks = navLinks.length - 1; navLinks.forEach((link, index) => { link.addEventListener("click", (e) => { e.preventDefault(); if (index === 0) { return gsap.to(window, { scrollTo: { y: tl.scrollTrigger.start, } }); } if (index === totalLinks) { return gsap.to(window, { scrollTo: { y: tl.scrollTrigger.end } }); } gsap.to(window, { scrollTo: { y: tl.scrollTrigger.start + (tl.scrollTrigger.end - tl.scrollTrigger.start) * (index / totalLinks) } }); }); }); Here is a fork of your codepen: Hopefully this helps. Happy Tweening! Thanks for solution 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