Jump to content
Search Community

Mix Horizontal scrolling with Vertical section wipes using scrollTrigger

George Marych test
Moderator Tag

Recommended Posts

Hello guys !
I would like to get a small help from you. 
Basically what I need to do is to mix Layered pinning animation ( I have included codepen demo) with horizontal scroll.
Let's say when you scroll down to third section (doesn't matter which one), it gets pinned and during that time when you scroll you are scrolling horizontally through the content that is present in that third section. It can be some gallery or Cards, and once you are done scrolling horizontally (content's end) then it continues with Layered pinning animation to the next section.  
I hope it is clear.

Thank you for your help

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

Link to comment
Share on other sites

 

Welcome to the GSAP forum.

 

2 hours ago, George Marych said:

Basically what I need to do is to mix Layered pinning animation ( I have included codepen demo) with horizontal scroll.

 

It would be best to start with thinking about what logically needs to be different from the example you posted to achieve what you described.

 

In the example you posted, the panels are being pinned without pinSpacing for the layering effect - for your fake-horizontal-tween section you will need pinSpacing, though. Also in the example you posted, the distance between start and end is 100% of the viewport's height, since no end is specifically defined - for your fake-horizontal-tween section you will need to calculate how long that distance needs to be.

 

Basically the distance will have to be however long you want that tween to be scrubbed over, plus e.g. a window's height which would make space for the layering effect after your done tweening horizontally. Then, since you need to have pinSpacing active for that, you will probably have to somehow re-position the panel following your fake-horizontal section to allow it to scroll-over the fake-horizontal section, e.g. via a margin-top of -100vh (i.e. a negative value equal to the distance you added to the pinning-distance as mentioned before).

 

You could probably still handle the pinning inside of the forEach loop (via usage of ternary operators for specifying alterations for your fake-horizontal section) but you will very likely have to set up a seperate ScrollTrigger for the scrubbing tween only - because you need the tween to be scrubbed over less distance than you are pinning the section, i.e. the 100vh mentioned before that make the difference here.

 

You see, there are a couple of things you need to take into account - but these pointers should be a good starting point to give it a shot yourself.

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, akapowl said:

 

You see, there are a couple of things you need to take into account - but these pointers should be a good starting point to give it a shot yourself.

 

Thanks for the response, it was helpful. 

so basically I tried implementing some logic to the codepen I have posted before. It seems to do scrolling horizontally but it simultaneously scrolls vertically as well, I seem to struggle figuring it out, is there a way to somehow "pause" the first scrollTrigger event until the horizontal scroll ends ?

here is a snipppet: 

See the Pen gOLpGxJ by Marych (@Marych) on CodePen

Link to comment
Share on other sites

 

32 minutes ago, George Marych said:

It seems to do scrolling horizontally but it simultaneously scrolls vertically as well

 

That is because the pinSpacing is set to false - as I said above, you need to set the pinSpacing to true for the section that you want the horizontal-tween on. Here is how you could do that using a ternary operator that checks if the panel in the loop has a certain class, e.g.

 

gsap.utils.toArray(".panel").forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: "top top", 
    pin: true, 
    pinSpacing: panel.classList.contains('purple') ? true : false // <---
  });
});

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

 

Then as I said, you could do something similar with regard to the end, because as I mentioned, the end for that section will need to be different from all the other sections' end.

 

Also, the other ScrollTrigger I mentioned  (the one that is responsible for the tween only) should not be pinning, since you are already pinning that section. The way you have it set up now, you are creating conflicting behaviour.

 

And although I'm not quite sure what you were trying to accomplish with that last part (the array of '.panell'), I would suggest scratching that part, as I don't think it will help but also only create more conflicting behaviour.

 

  • Like 2
Link to comment
Share on other sites

28 minutes ago, akapowl said:

 

And although I'm not quite sure what you were trying to accomplish with that last part (the array of '.panell'), I would suggest scratching that part, as I don't think it will help but also only create more conflicting behaviour.

 

Sorry if that was misleading, I was just messing around and left it hanging..

Snippet: 

See the Pen gOLpGxJ by Marych (@Marych) on CodePen



I got what u were saying, I think this is the closest I got to actual animation I am striving for.

calculations are just random, I am trying to mimic what it will feel like and I will implement actual calculations in the project itself.

Last question I guess: as you can see in the snippet snapping effect is present everywhere except when you scroll from third section (where horizontal scroll exists) to fourth , can't really understand why.

sorry I if I was being naive, this is my first go at GSAP, still trying to wrap my head around it ))
you are being really helpful !!

Link to comment
Share on other sites

13 minutes ago, George Marych said:

Last question I guess: as you can see in the snippet snapping effect is present everywhere except when you scroll from third section (where horizontal scroll exists) to fourth , can't really understand why.

 

That is because now you have the pinSpacing set to true for the purple section, thus the page's layout (managed via the pin-spacer element ScrollTrigger creates) will now respect the distance you are pinning and accomodate for that (meaning it will seamingly 'push down' subsequent content) whereas it doesn't do that for the other sections - and you need that for this section.

 

The layering effect on the other hand (which I think you are referring to when you say snapping - the term snapping actually refers to something different in the realm of ScrollTrigger / GSAP) relies on pinSpacing being set to false there, so you have to work around that somehow if you want to achieve that effect for after your fake-horizontal-scrolling section.

 

That's what I meant by this:

 

2 hours ago, akapowl said:

In the example you posted, the panels are being pinned without pinSpacing for the layering effect - for your fake-horizontal-tween section you will need pinSpacing, though. Also in the example you posted, the distance between start and end is 100% of the viewport's height, since no end is specifically defined - for your fake-horizontal-tween section you will need to calculate how long that distance needs to be.

 

Basically the distance will have to be however long you want that tween to be scrubbed over, plus e.g. a window's height which would make space for the layering effect after your done tweening horizontally. Then, since you need to have pinSpacing active for that, you will probably have to somehow re-position the panel following your fake-horizontal section to allow it to scroll-over the fake-horizontal section, e.g. via a margin-top of -100vh (i.e. a negative value equal to the distance you added to the pinning-distance as mentioned before).

 

So when the distance of your tween's ST is 1000px e.g., the distance for the pinning ScrollTrigger should be 1000px +  the window's height;

i.e.

1000px for the tween

and

the window's height for when the subsequent section comes scrolling-over.

 

And for it to come scrolling-over you would also have to...

 

Quote

[...] somehow re-position the panel following your fake-horizontal section to allow it to scroll-over the fake-horizontal section, e.g. via a margin-top of -100vh (i.e. a negative value equal to the distance you added to the pinning-distance as mentioned before) [...]

 

[...] because due to the pinSpacing otherwise it would come into view only when the purple section unpins.

 

 

 

23 minutes ago, George Marych said:

sorry I if I was being naive, this is my first go at GSAP, still trying to wrap my head around it ))
you are being really helpful !!

 

All good, and glad to hear that this is helpful to you. If you don't have any experience whatsoever with ScrollTrigger / GSAP thus far, this already is quite an ambitious task to delve into, as you are trying to combine multiple different concepts into one working scroll-driven layout, so naturally this is quite a bit to take in; and it takes some getting used to.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...