Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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

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