Jump to content
Search Community

Basic Pin not working - conflict with Horizontal scroll maybe?

jenstarr test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi, I was trying to do a basic pin in a vertical section after a horizontal scroll section and on my site, it was passing the class .is-inview to the vertical section as soon as the page loaded (before it was in view), causing the basic pin element to scroll up the page way before it should. I decided to recreate the basic pin on a simplified demo to see if it would work correctly to try and figure out what I'm doing wrong, and it's not working at all on my demo. Any help would be greatly appreciated!

See the Pen eYeYKog by jenstarr (@jenstarr) on CodePen

Link to comment
Share on other sites

  • Solution

Hello @jenstarr

 

They are not conflicting, the problem is that you create the ScrollTrigger for the pinning of your image in the vertical section before doing anything else. When it comes to using a smooth-scrolling library, the order of execution of things (initializing the smooth-scroll, setting up the scrollerProxy() etc. ) is rather important. You'll want to stick to the order of things that is shown in the locomotive-scroll example on the scrollerProxy() documentation page.

 

Also; you'll always want to create your ScrollTriggers in order of appearance of the elements on the page - another problem is that that that ScrollTrigger for the pinning of your image in the vertical section can not know about the pinning of the fake-horizontal section because you created it beforehand. So you'll actually want to create it after that. If for some reason you can not create your ScrollTriggers in order of appearance (like you might run into when creating multiple pinning fake-horizontal sections in a forEach loop like that), you have some options to either use ScrollTrigger.sort() or add a refreshPriority to your ScrollTriggers, as explained in more detail on this documentation page for the .sort() method.

 

On a different note: you had a browser default scrollbar showing (which you'll likely want to prevent when using locomotive-scroll), so I also added overflow: hidden !important to your .scrollContainer in this pen. I hope this will help clear things up a bit.

 

 

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

 

  • Like 3
Link to comment
Share on other sites

Thank you so much! I had no idea they had to be in order of appearance, I assumed it wouldn't matter since in my mind one wasn't affecting the other but this is great to know. I've very recently started trying to teach myself how to use GSAP so there's a lot I don't know.

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