Jump to content
Search Community

Pinning not working on parallax background section

Shehzad Asif test
Moderator Tag

Recommended Posts

Hi there

 

With reference to attached codepen url, the problem is pinning is not working on the section with parallax background with locomotive scroll and the section gets blank and all content is hidden. Does anyone knows what's causing this issue and how to solve it.

 

Regards,

Shehzad Asif

See the Pen LYRBaVW by ShehzadAsif (@ShehzadAsif) on CodePen

Link to comment
Share on other sites

Hey @Shehzad

 

As I have noticed and noted on a different thread recently, locomotive-scroll's own data-atrributes (in connection with their effects) can cause problems with ScrollTrigger's functionality.

 

 

 

 

Removing the data-attributes on those sections seems to solve the issue. Is that better?

 

Edit:

Well, probably with the removing of the data-attributes, the locomotive-scroll built-in parallax-effect you were having there is gone now too, right? ...I think you will probably have to try and built a similar effect from scratch if you want to combine it with ScrollTrigger's pinning.

 

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

  • Like 2
Link to comment
Share on other sites

Hi Paul

 

Thanks for the clarification, The reason I want to use data-attributes is to make my long page more smoother and without this data-attr page feels sluggish a bit. So this has to be there. 

Second thing I am not using any locomotive built-in parallax effect aside from smooth-scroll specifically in that section.

 

Third, I am trying to make it workout by wrapping the inner section of that section under a div and then pin it but it kind of solve the issue by pinning it correctly but brings another issue. It is that the next section just cover it and behaves like pinSpacing is set to false.  I tried different things like "put margin-top: 100vh to next section,  used locomotive data-scroll-sticky and used z-index:-1 to put it behind the parallax section. But It still comes to the front of pin section.

 

Is there any way It can be resolved in this way by somehow managing the next section to detain at its position until parallax section is scrolled fully. I tried it, so far failed. I updated my codepen to make it clear what I am saying.

 

 

Link to comment
Share on other sites

 

Yeah, I don't know how that would be achievable.

 

Let me try to explain my understaining of the problem at play here:

I am by no means an expert on locomotive-scroll, but from what I see, when you apply those data-attributes to your sections ( which from reading in the docs of loco-scroll appears to be a tool of choice to improve performance ) the transform: matrix3D that locomotive-scroll uses for the smooth-scrolling-effect is no longer applied to the .smooth-scroll container itself but to each of those sections individually instead - and this is prone to throw off whatever you try especially with pinning Scroll-Triggers. So the smooth-scrolling itself is not achieved by 'tweening' on the container itself anymore, but on the sections themselves. Since locomotive-scroll will inevitably tell the sections to move up for the smooth-scrolling in this scenario, ScrollTrigger's pinSpacing will probably just have not have the effect here like it would when the .smooth-scroll container is being tweened on - the sections will move, no matter what because locomotive-scroll tells them to.

 

That is just my guess and comprehension of the scenario - I might be off though. But I'm afraid I can not help you any further with this.

 

On a sidenote:

If you want to try out changes, next time please fork your codepen and apply those changes to the fork. This way the context of the whole conversation will be preserved for all future readers and this thread will be of more help for them if they run into a similar problem as you did.

  • Like 3
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...