Androlax Posted January 7, 2022 Posted January 7, 2022 Hey, I have a problematic with LocomotiveScroll & GSAP, I would like each section to show on top of each other while scrolling basically like this See the Pen mdPvGPK?editors=1010 by JackiePaper (@JackiePaper) on CodePen. It's working well with the ScrollTrigger.create(xxx) if I remove `data-scroll-section` on each section with LocomotiveScroll (because this one manage the transform of the section). A website have done it pretty well there : https://clar.dev/ I tried to reverse engineer this, but could not find for now how they did this. If you have any idea on this problematic See the Pen QWqBame by th-o-benoit (@th-o-benoit) on CodePen.
akapowl Posted January 7, 2022 Posted January 7, 2022 Hello @Androlax The pinning that is neccessary for this effect, will not work on sections that have locomotive-scroll's data-scroll-section atrribute - there is nothing much that can be done about that. When inspected in devtools, you can notice that instead of pinning the section itself, they are pinning the contents of that section (as the pin-spacer here is inside that section - whereas it would wrap the section if they were pinning the section). Maybe that can serve as a starting-point for you.
Androlax Posted January 7, 2022 Author Posted January 7, 2022 12 minutes ago, akapowl said: Hello @Androlax The pinning that is neccessary for this effect, will not work on sections that have locomotive-scroll's data-scroll-section atrribute - there is nothing much that can be done about that. When inspected in devtools, you can notice that instead of pinning the section itself, they are pinning the contents of that section (as the pin-spacer here is inside that section - whereas it would wrap the section if they were pinning the section). Maybe that can serve as a starting-point for you. Hello @akapowl I updated the codepen : See the Pen QWqBame by th-o-benoit (@th-o-benoit) on CodePen. I misunderstand how this can working there ? I think I don't quite understand how everything works here
akapowl Posted January 7, 2022 Posted January 7, 2022 You will need to specify the pinType to 'transform' in your example and set an end, and it should work. pinType "fixed" | "transform" - by default, position: fixed is used for pinning only if the scroller is the <body>, otherwise transforms are used (because position: fixed won't work in various nested scenarios), but you can force ScrollTrigger to use position: fixed by setting pinType: "fixed". Typically this isn't necessary or helpful. Beware that if you set the CSS property will-change: transform, browsers treat it just like having a transform applied, breaking position: fixed elements (this is unrelated to ScrollTrigger/GSAP). See the Pen KKXBQdM?editors=1010 by akapowl (@akapowl) on CodePen. Edit: Also (unless above is the effect you are going for), you would probably want to use the section itself as the trigger and pin the inner content. Like this See the Pen OJxwQbJ by akapowl (@akapowl) on CodePen. Here are two examples for that effect with locomotive-scroll, I prepared in the meantime. One without the data-scroll-section attribute... See the Pen ZEXjvdB by akapowl (@akapowl) on CodePen. and one with the data-scroll-section attribute. See the Pen LYzBQYm by akapowl (@akapowl) on CodePen. 1
Androlax Posted January 7, 2022 Author Posted January 7, 2022 Alright, it works pretty well, thanks you. Got a problem on a real world example, if the section have some more content, It will not work properly, I presume I will have to adapt the `end` option ?
akapowl Posted January 7, 2022 Posted January 7, 2022 I added another example to the post above - maybe that already solves the problem you mentioned ? Otherwise I am not really sure I understand, what you are asking. If the problem persists, another demo would be great
Androlax Posted January 7, 2022 Author Posted January 7, 2022 50 minutes ago, akapowl said: I added another example to the post above - maybe that already solves the problem you mentioned ? Otherwise I am not really sure I understand, what you are asking. If the problem persists, another demo would be great Yeah of course you can't see it without a little demo aha, I made up a little minimal demo : See the Pen ExwpQee by th-o-benoit (@th-o-benoit) on CodePen. As you can see I changed the `start: top top` to `start: bottom bottom` => It breaks if there is a little section (look at the green section), it moves the text inside And another one, I have a section on top with an image on right, and texts on left, I want the image to be pinned till the text is scrolled down entirely (It make it break so) Do you see the problem ? (there are both problem I guess, because the second one is not working even with the `start: top top` Edit: Maybe it has something to do with the `pinnedContainer` option?
akapowl Posted January 7, 2022 Posted January 7, 2022 Ah, now I get it. Yeah, setting the start to 'bottom bottom' when you have content overflowing would have been my suggestion. But for me it works just fine and doesn't break in your demo. So maybe I'm missing something? If you want to pin other things inside that section you can not have them inside the element that you are pinning before or else you would be creating nested pins, which you can not have. You would have to do things a bit different and pin each of the elements individually then. Notice how in the demo below I changed the const inner to this, using a ternary operator, checking on the class of the section to get the element to be pinned relevant for the overlay-effect. const inner = section.classList.contains('sectionLeftAndRight') ? section.querySelector('.leftText') : section.querySelector('.section-inner') This is just one approach to that. Depending on what else you are doing, you might have to find some other logic. See the Pen eYGjMYj by akapowl (@akapowl) on CodePen. 1
Androlax Posted January 7, 2022 Author Posted January 7, 2022 Thanks you a lot @akapowl, For the `start: bottom bottom`, It will break only if the section is not `100vh`. I updated your pen there : See the Pen PoJBewR by th-o-benoit (@th-o-benoit) on CodePen. You can take a look at the green section, when we scroll to it, it works well, but when the section is ended, the text inside the section is translating too. Is there a way to resolve that ? Again, thanks you for your time ❤️
Solution akapowl Posted January 7, 2022 Solution Posted January 7, 2022 Well, it doesn't exactly break - If you have different cases you will have to adjust the logic to fit those different cases. You could also use a ternary operator for the start - check if the section's scrollHeight is bigger or smaller than e.g. the window's height and set the start depending on that. start: section.scrollHeight <= window.innerHeight ? 'top top' : 'bottom bottom' See the Pen OJxwZME by akapowl (@akapowl) on CodePen. 4
Androlax Posted January 7, 2022 Author Posted January 7, 2022 Alright you are a genius ! (That was the easiest thing and did not even think about it aha)! Thanks you a lot again ! 2
Mattrudd Posted January 25, 2022 Posted January 25, 2022 May I ask - I'm trying to achieve a similar layered pinning result with smooth scroll... ...Except instead of a fixed first section then a layer overlapping it from the bottom, I'm looking to achieve the reverse - the first section as a top layer that scrolls up to reveal the second section (as in one of the ScrollTrigger examples). It breaks when I use the scrollerproxy method above, and not sure why? Think it's something to do with using gsap.to rather than scrollTrigger.create? See the Pen 8868915ce877bfded3d04dd9dea5f9c1 by matt-rudd (@matt-rudd) on CodePen. Elements flash up but then just white - checked for errors in the console but nothing showing. Here's a version without locomotive scroll, to demonstrate the effect, although I still need to fix the fade. See the Pen MWOWVdV by matt-rudd (@matt-rudd) on CodePen.
akapowl Posted January 25, 2022 Posted January 25, 2022 Hey @Mattrudd These threads should help with that. The first one contains that exact example I think you mentioned with locomotive-scroll. 1
Mattrudd Posted January 25, 2022 Posted January 25, 2022 Superb @akapowl thanks loads! You're the ScrollKing. Spent hours looking for these exact examples. ?
Mattrudd Posted January 25, 2022 Posted January 25, 2022 1 hour ago, akapowl said: These threads should help with that They certainly did, thanks again @akapowl! Nailed the effect I was after with relative ease. See the Pen PoOoBYv by matt-rudd (@matt-rudd) on CodePen. Performance isn't amazing but I just realised I'm on Safari ? 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now