Valerie Posted March 13 Share Posted March 13 Hello, I'm looking to use the Next and Previous buttons to scroll to the Next and Previous .desktopContentSection element. In the codepen, I have the Next button linked to #green and Previous buttons hard coded to #red to demonstrate the behavior, however after the element has scrolled to #green, if the Next button is clicked again the user is scrolled to #pink and then #blue. I'm thinking I would need to utilize Observer, but i'm struggling looking for an example I can adjust for my needs. Any assistance is very much appreciated, please let me know if you need anything from me. Thank you! See the Pen mdgEYbL by vyeltman (@vyeltman) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 14 Share Posted March 14 I would look in to the scrollTo plugin and have it scroll to the start of each ScrollTrigger you want to scroll to. What you can do is create an array of all your ScrollTriggers (that you want to scroll to) and then on prev/next increment a number and then gets it corresponding ScrollTrigger. There is a bit much going on in your demo and I can't figure out which ScrollTrigger belongs to what logic. The pseudo code would then look something like this. If you still need help please create a more minimal demo or create the array with all your scroll to ScrollTriggers (yourST.push(aScrollTrigger)), so we know which ScrollTriggers need to be scroll to. Hope it helps and happy tweening! gsap.to(window, { duration: 1, scrollTo: yourST[index].start }); Link to comment Share on other sites More sharing options...
Valerie Posted March 14 Author Share Posted March 14 @mvaneijgen Thank you for pushing me in the right direction! I have this updated See the Pen yLrapEw?editors=1011 by vyeltman (@vyeltman) on CodePen with an array of each of the slide id's to scroll to and initial swing at next steps needed. Ideally this will use the same ScrollTrigger start and end points that control the background color. So the Next button's scrollTo destination update at the same time. Please let me know if you need any additional information, thank you so much! Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted March 14 Solution Share Posted March 14 Hi, This is not the simplest thing to achieve. Here is a simple fork of your demo: See the Pen GRLjGBP by GreenSock (@GreenSock) on CodePen There are a few details missing but the bulk of the concept is pretty much there. Hopefully this helps. Happy Tweening! 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