Jump to content
GreenSock

Androlax

Locomotive Scroll Layered Section

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

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.

 

Unbenannt.thumb.png.d30f900d4f02b89215f5b97874a9ddf8.png

Link to comment
Share on other sites

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.

 

Unbenannt.thumb.png.d30f900d4f02b89215f5b97874a9ddf8.png

 

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 :(

 

Link to comment
Share on other sites

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

 

 

 

 

  • Like 1
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 ❤️

Link to comment
Share on other sites

  • Solution

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

  • Like 4
Link to comment
Share on other sites

Alright you are a genius ! (That was the easiest thing and did not even think about it aha)!

 

Thanks you a lot again ! 

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

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

 

Link to comment
Share on other sites

Hey @Mattrudd

 

These threads should help with that. The first one contains that exact example I think you mentioned with locomotive-scroll.

 

 

 

 

  • Like 1
Link to comment
Share on other sites

Superb @akapowl thanks loads! You're the ScrollKing.

 

Spent hours looking for these exact examples. 👍

Link to comment
Share on other sites

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 😆

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