Jump to content
Search Community

Pinned horizontal scroll section is shaky using ScrollTrigger & Locomotive Scroll

Cameron Knight test

By Cameron Knight
in GSAP

Moderator Tag
 Share

Recommended Posts

Cameron Knight test

Cameron Knight

Posted
Posted

Hey legends.

Forgive me if this is a Locomotive issue but I've been trying to pull off a horizontal scroll section but have come across an issue on mobile where as soon as it pins to the section, it becomes REALLY jittery and trying to overflow the section. Sometimes it will forget to pin after a second and readjust. I'm sure it's something i've done with my configuration with Scroll trigger & Locomotive but I can't figure it out.

 

If anyone knows how i can improve this or have come across something similar, i'd appreciate any advice ✌️

See the Pen qBNvrRQ by cameronknight (@cameronknight) on CodePen

  • Like 1
Link to comment
Share on other sites
akapowl test

akapowl

Posted
Posted

 

Hey @Cameron Knight

 

I had the same experience on mobile with native scrolling / swiping on pinned sections in a different scroller than the body.

It is connected to the pinType being 'transform' by default on other scrollers than the body (whereas it is 'fixed' there).

 

By default, only the <body> uses position: "fixed" for pinning and in all other cases, transform offsets are used

 

(from the scrollerProxy docs)

 

The solution for me was to set pinType: 'fixed' to those pinned ScrollTriggers on mobile.

I already tested it with your pen in dev-tools and it seems to do the trick.

 

See the Pen 77efc1f92bdfc21e52022c18fbe01029 by akapowl (@akapowl) on CodePen

 

 

 

Since it will break the behaviour on non-mobile devices though when setting that pinType ( probably related to how loco scroll handles things ), you will probably have to check for mobile/touch before creating your ScrollTriggers - and create them depending on what is needed.

 

 

 

@GreenSock explained the why on this jittering happening in this thread here pretty well

 

 

 

 

Hope this helps.

Cheers,

Paul

 

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites
akapowl test

akapowl

Posted
Posted

 

Yeah, I saw that line once, when playing with a locomotive-scroll demo, but since i never really use that smooth-scrolling-library myself, I don't always remember all the bells and whistles that come with it (or everything, that the real pros at Greensock here have already taken into account) - otherwise I would have linked you to it in the first place. I am glad though, the solution to your issue was that easy in the end.

 

Happy smooth-scrolling :) 

  • Like 2
Link to comment
Share on other sites
cbg test

cbg

Posted
Posted

Hi guys, this looks great and is almost exactly what I'm after for a project of my own. I'm very new to ScrollTrigger and I wondered if someone could help me out with removing Locomotive Scroll from Camerons example? It's really just the pinning and horizontal scrolling I'm after. Any other examples I've found rely on full width sections, I like how this approach allows for content of any width and calculates the scrolling automatically.

 

Thank you!

Link to comment
Share on other sites
ZachSaucier test

ZachSaucier

Posted
Posted
12 minutes ago, cbg said:

help me out with removing Locomotive Scroll from Camerons example?

Just remove the parts related to the scroller :) Look in the developer tools console and fix any errors that appear.


If you're still having issues, please make a demo of what you have and we'll do our best to help.

  • Like 1
Link to comment
Share on other sites
cbg test

cbg

Posted
Posted
56 minutes ago, ZachSaucier said:

Just remove the parts related to the scroller :) Look in the developer tools console and fix any errors that appear.


If you're still having issues, please make a demo of what you have and we'll do our best to help.

I originally tried but I think I was removing the wrong sections, thanks for the tip of looking for 'scroller'. I think I've cracked it now, second times a charm! Could you sanity check this for me please? Appears to be behaving as expected though so thank you!

See the Pen WNxByEj by cbg (@cbg) on CodePen

Link to comment
Share on other sites
cbg test

cbg

Posted
Posted

Thanks Zach. I got this all working standalone but when I pull it into my project it's jumping around and not working properly. Something on the page is conflicting with it but I can't figure out what, do you know what it is? Thanks again.

 

My project (doesn't work): https://scrolltriggertest.webflow.io

Standalone version (works): https://scrolltriggertest.webflow.io/home-copy

Link to comment
Share on other sites
cbg test

cbg

Posted
Posted

I've created a Codepen where I've been able to reproduce the issue, hopefully that helps? Adding a bunch of long divs above the scrolling part creates the issue?

See the Pen oNLrXjJ by cbg (@cbg) on CodePen

 

Also, when I move the scrolling part to the top of the DOM, the issue goes away, regardless of the content.

Link to comment
Share on other sites
ZachSaucier test

ZachSaucier

Posted
Posted

The issue is that you have a hard coded end value for your ScrollTrigger. So when there's a bunch of content before it the end is before the start so it finishes immediately once reached. Instead you should use a relative end value (+=). You should also make some properties functional values and use invalidateOnRefresh to make sure that your values get updated on refresh:

See the Pen jOrjPmm?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites
  • 1 year later...
PatrickRoppel test

PatrickRoppel

Posted
Posted

dear zach

 

i stumbled upon this thread and it is exactly what i needed... but now i would like to use the same scrolltrigger on multiple sections. i exchanged the id with a class sectionPin. and tried to get it to work with an array. but as i am complete looser when it comes to javascript, i dont get it to run...

 

any help would be appreciated. thank you very much in advance, patrick

Link to comment
Share on other sites
akapowl test

akapowl

Posted
Posted

Hello @PatrickRoppel

 

https://codepen.io/akapowl

 

My codepen profile shows examples for applying faked horizontal-scroll as such to multiple multiple sections - also in different versions with different smooth-scrolling libraries. This here is a version with locomotive scroll - maybe it'll help.

 

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

 

  • Like 1
Link to comment
Share on other sites
PatrickRoppel test

PatrickRoppel

Posted
Posted

thank you very much akapowl. i tried now for a long time, to combine the two things, not getting anyware. not even sure if its not a css problem now. scrolltrigger crates now two pin-spacers, but they dont seem to do what they are supposed to do. as the horizontal sections are just covering them up.

i have now tried to create my first codepen...

See the Pen zYEvPbY by patrickroppel (@patrickroppel) on CodePen

 

 

 

Link to comment
Share on other sites
akapowl test

akapowl

Posted
Posted

Hey Patrick,

 

Yes, I think it is related to the setup in the first place.

 

The display: flex on your .sectionPin is not neccessary and it actually throws things off, so just get rid off that - the container that is flexing the content is your .pin-wrap anyway.

 

For flexing correctly when expecting to set specific dimensions, make sure to set the flex properties or you might not get the outcome you expect - I did so by using the flex shorthand ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flex )

 

It doesn't appear to be neccessary in this special case, but I would also set a min-height on the element you are pinning, just in case.

 

Then in your JS you will actually want to use the pinWrapWidth.scrollWidth instead of the pinWrapWidth.offsetWidth for calculating the horizontalScrollLength.

 

And as it's always best not to use the element you are tweening on as the trigger and you already have that pinWrap inside your sectionPin, you could just use the section as the trigger instead and specify what you want to pin (the pinWrap).

 

This works better already

 

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

 

  • 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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...