Share Posted February 1 Hello everyone, I'm new around here. Starting with this fantastic tool! I am developing a project and I would need to know how to scroll to the end of a timeline linked to a scrolltrigger. So you could navigate to a given timeline or to the previous or next timeline. I have tried to reproduce it in codepen. Can't figure out the solution Thanks in advance. See the Pen wvxQzqa by juanadie (@juanadie) on CodePen Link to comment Share on other sites More sharing options...
Share Posted February 1 Hi @juanadie and welcome to the GreenSock forums! First thanks for being a Club GreenSock member and supporting GreenSock! In this case is better to check the ScrollTrigger start/end points for each timeline and feed that value to the ScrollTo plugin: const timelines = [timeline1, timeline2, timeline3, timeline4, timeline5]; const links = gsap.utils.toArray(".link"); let currentIndex = 0; const gotoSection = () => { const targetSt = timelines[currentIndex].scrollTrigger; gsap.to(window, { scrollTo: { y: targetSt.start, autoKill: false }, duration: 1 }); }; links.forEach((link, i) => { link.addEventListener("click", (e) => { e.preventDefault(); currentIndex = i; gotoSection(); }); }); const prevBtn = document.getElementById("prev"); prevBtn.addEventListener("click", () => { if (!currentIndex) return; currentIndex -= 1; gotoSection(); }); const nextBtn = document.getElementById("next"); nextBtn.addEventListener("click", () => { if (currentIndex === links.length - 1) return; currentIndex += 1; gotoSection(); }); Here is a live example: See the Pen zYLMdwP by GreenSock (@GreenSock) on CodePen That example uses the start point of the ScrollTrigger instance so it'll take you to the start of the timeline. If you want to go to the end of the timeline just use this in the gotoSection method: const gotoSection = () => { const targetSt = timelines[currentIndex].scrollTrigger; gsap.to(window, { scrollTo: { y: targetSt.end, autoKill: false }, duration: 1 }); }; I used the start point since it makes more sense to me as a user to go to the start of a section instead of the end when clicking an anchor link. Hopefully this helps. Let us know if you have more questions. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Solution Author Solution Share Posted February 1 WOW! Thanks, Rodrigo, you made my day! 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 8 Hello! Excuse me, is it possible to jump at start/end point of an timeline without scrolling? Thanks in advance. Link to comment Share on other sites More sharing options...
Share Posted February 8 Hi, Just create a couple of GSAP set() instances in order to go to the top/bottom of the document: https://greensock.com/docs/v3/GSAP/Tween/set() Something like this: const topBtn = document.getElementById("top"); topBtn.addEventListener("click", () => { gsap.set(window, { scrollTo: 0 }); }); const bottomBtn = document.getElementById("bottom"); bottomBtn.addEventListener("click", () => { gsap.set(window, { scrollTo: "max" }); }); I updated the codepen example to include both buttons: See the Pen zYLMdwP by GreenSock (@GreenSock) on CodePen Also I'm using fastScrollEnd in order to set the animations to their end state. You can read more about it here (and watch @Carl's video, it's a great explanation of how it works): https://greensock.com/3-8#preventOverlapsAndFastScrollEnd Let us know if you have more questions. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 8 Thanks!! Sorry, I didn't explain myself well. The idea is to go (without scroll) at the beginning or end of each timeline. So that clicking on TIMELINE 4, for example, would jump to it (beginning or end). Link to comment Share on other sites More sharing options...
Share Posted February 8 Hi, Just use the same approach I posted in my previous post. Create a set instance (zero seconds GSAP instance so it is immediate) using the ScrollTo Plugin in order to jump to that position without scrolling. Right now those links are using this method: const gotoSection = () => { const targetSt = timelines[currentIndex].scrollTrigger; gsap.to(window, { scrollTo: { y: targetSt.start, autoKill: false }, duration: 1 }); }; So instead of using a to() instance use a set(): const gotoSection = () => { const targetSt = timelines[currentIndex].scrollTrigger; gsap.set(window, { scrollTo: { y: targetSt.start, autoKill: false } }); }; Keep in mind that at this stage your code is using ScrollTrigger to control the progress of the specific timeline you created for each section, so in order to set the progress of that timeline you'll have to update the scroll bar position otherwise you'll see a lot of jumping around and not great UX. Maybe I'm missing something here, so if you keep having issues please include a minimal demo that shows the problem you're having. Happy Tweening! Link to comment Share on other sites More sharing options...
Author Share Posted February 8 Ok, I try and share a demo, thanks!!! It seems easier than I thought 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 9 See the Pen XWBwxWb by juanadie (@juanadie) on CodePen Well, I think I got it Thank you so much!!! Link to comment Share on other sites More sharing options...
Author Share Posted February 9 One more thing. I am seeing that gsap.set is not compatible with scrollsmoother. Any solution about it? THANKS! See the Pen WNKqQZx by juanadie (@juanadie) on CodePen Link to comment Share on other sites More sharing options...
Share Posted February 9 Hi, In your jump method use ScrollSmoother's scrollTo method instead of the regular ScrollTo Plugin config: const jumptoSection = () => { const targetJp = timelines[currentIndex].scrollTrigger; smoother.scrollTo(targetJp.end, false); }; You can read more about it here: https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo() Let us know if you have more questions. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 9 It works great!!! Thank you, if you come from Spain (MAD) you are invited to a beer! Or a coffee, whatever you prefer 2 Link to comment Share on other sites More sharing options...
Share Posted February 9 2 hours ago, juanadie said: Thank you, if you come from Spain (MAD) you are invited to a beer! Or a coffee, whatever you prefer I can't stand any heat over 32ºC, so probably I'll go back to Spain during autumn or winter, so I'll take some chocolate y churros at La Puerta del Sol Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 10 Ha ha ha! Come on. Count on it! Chocolate con churros Thanks! 1 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