scrollsmoother and position sticky

[Jloafs]

I'm just playing with scroll smoothing ( which looks amazing) but ran into an issue with position sticky. The desired effect is that each section in this pen should be sticky and not scroll off the top of the viewport with each subsequent section scrolling in over the top. As soon as I add scrollsmoothing into the mix this breaks. Any thoughts? Ideally I'd like the sections to animate to the top as soon as they enter the view port. Any help would be much appreciated - I'm not an expert btw (understatement).

See the Pen zYRyYGp by jloafs-DM (@jloafs-DM) on CodePen

[akapowl]

Hello @Jloafs

 

Assuming that position: sticky is a hybrid of position relative and fixed, I suppose the same that applies to fixed elements will apply to sticky elements in a smooth-scrolling scenario with transforms on a parent container.

 

So you will probably have to find a different way to achieve that effect, like e.g. with ScrollTrigger's pinning. There is a demo (Cover Layered Sections) on the demos-page that shows a way for how to do that. I hope this will help - happy tweening!

 

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

 

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

 

[Jloafs]

Thanks @akapowl

 

That gets someway there but it doesn't seem to quite snap to the top properly. Is there a way to force the snapping as soon as the section scrolls in? At the moment this can kind of get stuck between halfway 2 sections or it reaches the top after a wee delay which doesn't feel smooth.

 

[akapowl]

42 minutes ago, Jloafs said:

That gets someway there but it doesn't seem to quite snap to the top properly.

 

That's because your calculation is off. It would need to be 1/(numberOfSections - 1).

 

It will snap to increments of whatever is the result of your calculation there - so in your case it would snap to [ 0, 0.25, 0.5, 0.75, 1 ] because 1/4 is 0.25.

 

Now try to think of it this way - in your case it would snap to the following (this is just to show how many sections you would actually need in that case for it to snap fitting to the number of sections)

 

[ 0,   0.25,   0.5,  0.75,    1 ] 
  |      |      |      |      |
 sec1   sec2   sec3   sec4   sec5

...to be in view after snapping.

 

...but you don't have a fifth section, you see? That's why you see it snap to in between sections in your case.

 

You would need to substract 1 from whatever number of sections you have and it would give you this in your case: 1/(4 - 1) = 1/3 = 0.33 so it would snap to [ 0, 0.333..., 0.666..., 1 ]

 

[ 0,       0.333...,   0.666...,   1 ] 
  |          |           |         |
 sec1       sec2        sec3      sec4

...to be in view after snapping.

 

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

 

 

 

42 minutes ago, Jloafs said:

Is there a way to force the snapping as soon as the section scrolls in? [...] [now] it reaches the top after a wee delay which doesn't feel smooth.

 

Snapping starts after the scrolling has finished - that's what it is supposed to do. You can adjust some options on how it should feel by using snap as an object.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

snap: {
  snapTo: "labels", // snap to the closest label in the timeline
    duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
      delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping
        ease: "power1.inOut" // the ease of the snap animation ("power3" by default)
}

 

 

 

But it sounds like what you actually may want is it to behave like a a slider? ...like to instantly snap once you 'scroll' just the tiniest bit? ...if that is the case, for that I wouldn't recommend using ScrollTrigger, because ST depends on native scrolling behaviour and that sort of thing implemented with native sccrolling behaviour is error-prone. Maybe a slider is more like what you intend - for which you could utilize the Observer plugin. But you would have to handle all the logic for things to happen yourself - Observer is mainly just responsible for observing the different events.

 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

 

 

Alternatively you could try going down the road combining ScrollTrigger with the ScrollTo-Plugin, something like discussed in the thread linked below, but as I already mentioned; personally I wouldn't recommend that at all as it sort of delivers a somewhat weird user experience IMHO and is quite prone to error.

 

 

 

[Jloafs]

Thanks @akapowl

 

I'll chew this over a little bit. Thanks heaps for your help.