Split Screen Pinning with button to click to next element in pinned

[Valerie]

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

[mvaneijgen]

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 });

 

[Valerie]

@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! 

[Rodrigo]

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!