Pinned element with horizontal scroll

[builotex]

Hello, I am new to greensock and would like to achieve following. I want to have some list of items where last item of this list gets pinned to the bottom of the page as I scroll down to this item (this is working pretty nicely if I don't have my horizontal div scroll animation added in JS). And right after this list, there should be horizontal scroll div with bunch of images. As you can see in my codepen I don't have any horizontal scroll working, but for the sake of simplicity there isn't any horizontal div working. The base structure of my horizontal div is the same as in codepen (gsap.to('.horizontalScrollDiv'). My issue can be seen on codepen, for the first page reload everything works fine until I reach last image of my horizontal div. My pinned list element then gets unpinned and never gets pinned again as it used to and sort of jumps around. Just take a look at codepen. 

See the Pen ExOrOPq by builote (@builote) on CodePen

[mvaneijgen]

Hi @builotex welcome to the forum!

 

I've moved some things around in your pen and add some extra div and CSS to have the images be side by side and then move them in your horizontal tween. 

 

From the docs about pinnedContainer, I've never used this my self, so I don't know what it is you want to happen, but this isn't it I think. 

 

Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDEan element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. Important: nested pinning is not supported, so this feature is only for non-pinning ScrollTriggers (added in 3.7.0)

 

lastLiElement is what gets pinned in the one ScrollTrigger and in the other ScrollTrigger .trigger gets pinned. These work independently of each other. I'm not really sure what it is you want to do, but from what you described this is what it sounds like it should do. Hope it helps and happy tweening! 

 

See the Pen ZEmwVYb?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[builotex]

@mvaneijgen Thank you very much! This is exactly what I want

[builotex]

@mvaneijgen One more thing. Is there a way to prevent the space between UL element and horizontalScrollDiv from being created? (You can see this space increases as you scroll to horizontalScrollDiv - UL element is staying at the same place, but the space between UL and horizontalScrollDiv is increasing as you scroll) That was why I was trying to pin anti-pinning-div instead of horizontalScrollDiv. When I pin the anti-pinning-div  that space is being created on top of anti-pinning-div instead of on top horizontalScrollDiv.

[mvaneijgen]

You've set  end: ScrollTrigger.maxScroll(window) and the height of #sec-1 to 10000px; which makes it that it will set it to the maximum scroll distance. If you don't want that, then don't set that. 

 

See the Pen JjexxPB?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

 

Check out this video to learn how to set a distance with ScrollTrigger and some other great tips 

 

 

[builotex]

@mvaneijgen Even after removing end: ScrollTrigger.maxScroll(window), the space is still being created.

[mvaneijgen]

Ok I see what you mean, but there is no space. Below a fork of your pen with out any GSAP and I've drawn two borders in red and the space between these two borders are around 500px. 

 

If you enable GSAP and inspect these two points the space between them is still 500px. So if you don't want any space between these to points you have to fix your layout before starting with GSAP. The layout and thus CSS is really important when working with GSAP, probably the most important!

 

See the Pen oNQmmzV by mvaneijgen (@mvaneijgen) on CodePen

[builotex]

I am sorry for confusion. Let me show you on screenshots what space I mean exactly 

And after I scroll further down

You can see x < y. But I want that space to be constant. I don't want it to increase as I scroll further down.

[mvaneijgen]

I'm really unclear on what it is you want to do, maybe you can explain that instead of looking for the solution you think you need. 

 

In your code you pin the horizontal slider and the last item, this means they stay, which entails that other elements move otherwise pinning something wouldn't have any effect. 

 

Here a demo where the space stays the same, but that of course means the horizontal section is not pinned.

 

See the Pen GRwzLLa?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[builotex]

@mvaneijgen I just wanted to remove mentioned space while keeping the scroll div pinned that's all. Thank you for your assistance, I've came back to my first solution and achieved my desired effect with pinning anti-pinning-div. On top of that to keep last LI element pinned to the bottom I've added pinReparent: true option. But this option behaves quite strangly. Everything works as intented, but take a look at this new PEN. Last LI element gets pinned to the bottom. But try to scroll down, make sure LI element is pinned at the bottom and then try to RESIZE window. The LI element disappears and only comes back when you scroll back to its previous position in UL.

 

I've inspected the HTML generated code and when you resize window, the inset of given LI element suddenly becomes very large and therefore LI element disappears. Is this bug or intended behaviour?

 

Edit: I've tried to play with end value and it seems on window resize pinned element gets pinned to the end position. Is there a way to prevent this? I want it to stay at scroller-start/scroller-end position. Not suddenly jump to end position on window resize

 

See the Pen PoxVMeg by builote (@builote) on CodePen

[Rodrigo]

Hi,

 

I have to agree with @mvaneijgen that is very unclear to me as well what you are trying to achieve. I read this thread a few times, checked some of the examples and this is the best guess I can come up with based on everything I saw (better see it in a different tab, click on the Edit On Codepen link):

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

 

If that is not what you're looking for, please be as specific as you want in terms of what you're trying to achieve, include a diagram or a live working example of what is your objective.

 

Finally since you're just starting with GSAP I recommend you to take a look at our learning center:

 

 

Also @Carl has a great free course for getting started with GSAP:

https://www.creativecodingclub.com/courses/FreeGSAP3Express

 

Plus a bunch of other courses and lessons at very convenient prices:

https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484

 

Hopefully this helps.

Happy Tweening!

[builotex]

@Rodrigo Many thanks, this is exactly what I was trying to achieve. I've achieved that with pinReparent: true option set to true, but there was mentioned resizing problem. Your solution works flawlessly, really appreciate it

[builotex]

@Rodrigo By the way, is there any way to keep last item pinned at the bottom up until the very end of document?

 

For reference this is what I want to achieve. But there is mentioned resizing problem - when I resize window when item is pinned. The pinned element "disappears", meaning appears at the very bottom of the page.

 

See the Pen bGQZezx by builote (@builote) on CodePen

Edited August 4, 2023 by builotex
Solution with resizing problem added for reference

[Rodrigo]

Hi,

 

This is the simplest way I can think of, it might not be the best but without dedicating a lot of time this is the first thing that seems to work:

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

 

Hopefully this helps.

Happy Tweening!

[builotex]

@Rodrigo Wonderful, thank you very much ☺️