Jump to content
Search Community

Layered pinning followed by standard scrolling content

Jase test
Moderator Tag

Recommended Posts

Hey @Jase


Working on this without the linked extra CSS from the base codepen will make things easier for you to wrap your head around.


See the Pen 153ca19006b303b070b25e9648faa60e by akapowl (@akapowl) on CodePen


And here's a variation of that with the scrollable content below being revealed, too.


See the Pen bb978bd8e0ca242a41301ae3fd4b626f by akapowl (@akapowl) on CodePen





Simplified v1 a bit.


  • Like 4
Link to comment
Share on other sites

Thanks for your help. Wasn't sure whether to use the negative margin or use the  ScrollTrigger.matchMedia().

Your solution works brilliantly, however, I wanted to keep the div data-scroll-section in place so it is inline with the scroll library specs. When I try to add this format back into your example, it fails to work. I can't complain through, so thank you :)

Link to comment
Share on other sites


Well, now I see that removing the data-scroll-section is what actually makes your initial example work, too - didn't even notice the first time. The data-scroll-section option that comes with locomotive-scroll won't work with ScrollTrigger's pinning because of how it will transform the sections with that attribute instead of the whole scroll-container's complete content - a little more elaborated guess on the why is to be found in this thread:



  • Like 2
Link to comment
Share on other sites



I would just add a bit of my experience with locomotive and GSAP pinning. The thing is locomotive's way of pinning is quite different from gsap and the way it is implemented it over rules the some things of GSAP like pinning. I faced the same issue recently. Here is what I will suggest.


1- Use locomotive pinning method, it is quite easy and flexible to implement when using locomotive (although gsap is far more easy and flexible). But this is the caveat of using locomotive.

2- Do not use data-scroll-section attribute if your page is not too long. If you do so it may create some complexity with other things and you will have to use some hacks to overcome these complexity.

3- In case you are using data-scroll-section attribute and want to use GSAP pin effect. Then use a div inside that section to pin things through this div bcs pin does not work on data-scroll-section itself.



Shehzad Asif

  • Thanks 1
Link to comment
Share on other sites

@Shehzad Thanks so much for your advice Shehzad. I’ve found that mixing the two isn’t always the best choice, especially with pinning. The layered pinning actually works quite well in my LS container (without using data-scroll-section), but find the rest of the page content can be a little bit choppy. I wasn’t aware of the loco pinning method, are you able to share some info on this?


Link to comment
Share on other sites

All the relevant info available in the loco dos in data-attributes section. For your convenience the syntax is as following for pin effect: 


// for example you want to pin div, give an id to the parent of div, bcs loco pin the elements through ID
<section id="sticky">
  <div data-scroll data-scroll-sticky data-scroll-target="it will trigger the pin effect/ #sticky" data-scroll-offset="it will decide the pin element position like top or bottom etc"></div>


Also check this link: "https://locomotivemtl.github.io/locomotive-scroll/"



Shehzad Asif

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...