Diagonal scrolling to anchors

[LondonPete]

Many years ago, I created a website where each 'page' was on a virtual grid of viewports e.g.

 

**************************************************

*          home page             *        contactus   *    about      *

*****************************************************

*        section1.p1                *      section1.p2  *     section1.p3 *

***********************************************************************

*        section2.p1                *      section2.p2  *     section2.p3 *   sectopn2.p4       *

***********************************************************************

*        section3.p1                *      section3.p2  *  

******************************************************

*        section4.p1                *      section4.p2  *     section4.p3 * 

******************************************************

 

Imagine the sections above are viewports and there are anchors connecting them, so an anchor in section1.p1 might link to section3.p2 and an ancor in section4.p2 might link to section2.p4

 

Using Mootools, the FX.Scroll function would take the x and y coordinates and when clicking the link would smoothly scroll to and from the different anchor points, sometimes diagonally or horizontally/vertically depending on the target location.

 

Is there any way in GSAP to achieve this? Another solution that would meet my needs would be a vertical the horizontal scroll in one move if diagonal scrolling cannot be achieved.

 

I'm quite new to GSAP, but understand JavaScript and jQuery.

 

Many thanks

Pete

 

[Rodrigo]

Hi,

 

The simplest approach I can think of is to move the entire content around without any scrolling, since I would assume that every section has the screen dimensions you could add scrolling to each section and move the container around since the amounts will be known and easy to anticipate if the screen is resized.

 

Here is a super simple demo that shows the approach I would take first.

See the Pen GRLMxdW by GreenSock (@GreenSock) on CodePen

 

You can click anywhere (except the toggle button) to play a timeline that moves the content around and you can toggle the overflow to see how it would work on a screen.

 

I'm pretty sure that there are other approaches that could be used, but those should be more complex and would require some bit of custom logic. Right of the bat I can't think of a simple way to achieve this using just vertical scroll without the whole thing looking weird, especially if you have to jump from section 1 to 3 and you don't want to see everything in section 2 and wait for all that scroll to be completed.

 

Hopefully this helps

Happy Tweening!

[LondonPete]

Thanks Rodrigo,

 

A different approach. Your demo is based on a timeline so the sequence is the same whenever you click. Obviously, I'd want to click and go to specific locations. If every element has a  size off 100vh x 100vw, and then all I'd have to do is calulate the position based maybe of a simple data attribute, for the colume and rows maybe. 

 

Something to think about though.

Regards

Pete

[Rodrigo]

Yeah I know about the timeline, addPause() and that it repeats itself. In no way my demo was intended as a fully working solution, just the simplest possible demonstration of an approach, nothing more.

 

You'd have to map the coordinates of each section of each row and use them in the respective links in order to make it work, which can be done in a simple nested loop probably.

 

Again just the simplest working proof of concept. Sorry if I mislead you into believing that it was a fully fledged demo.

 

Happy Tweening!

[LondonPete]

No I realised this was an example of a way to do it. 

 

But the scrolling effect in full screen is the sort of solution, it's just how you'd scroll to a particular location using GSAP that I'll need to research further.

 

Regards

Pete

[Rodrigo]

That is just JS logic plus some HTML and CSS, nothing more.

 

Here is a super simple concept:

See the Pen JjVrxyv by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[LondonPete]

That's great, thank you so much.