Share Posted June 6 Hi Am still getting my head around everything and have most of what I need working (will post an example when I do as I have had so much help here already). I have a parallax section page with pinned items all working and thought I would see if snap would work with the sections. It doesn't seem to. If I remove the inline data-speed from the section, the snap works as expected. I am guessing it is because of the transformation being applied to the parallax section. Do I need to try another route or does snap not work with parallax sections. I can put a demo of the two up if necessary but figured somebody more knowledgeable would most likely have a simple answer. Thanks Link to comment Share on other sites More sharing options...
Share Posted June 6 If you can post the demo it'd be much easier to help. It's possible it doesn't work and you'll need a workaround. Link to comment Share on other sites More sharing options...
Author Share Posted June 6 Thanks. I have found the issue. If I remove all the sections that are not 100vh such as header, footer and any other spacer items, it works as expected. Just not sure how to get my head around any logic that allows it to snap to sections less than 100vh. I will get a couple of demos up in the morning. Is the end of a very long day here. Thanks 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 7 Ok, I have 2 small demos to illustrate, identical except the version that does not snap has a smaller section. Not sure if it is possible to snap when the page is created with these smaller sections? Working version first with all the sections the same. See the Pen LYQJxVP by joneslafuente (@joneslafuente) on CodePen And then the version with the smaller section inserted. See the Pen RwQYKWa by joneslafuente (@joneslafuente) on CodePen Thanks Link to comment Share on other sites More sharing options...
Share Posted June 7 Hi there! Thanks so much for making those demos. So snap has quite a few options, at the moment you're using Number, (with a little bit of maths to return the number you need) From the docs... snap Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following: Number - snap: 0.1 snaps in increments of 0.1 (10%, 20%, 30%, etc.). If you have a certain number of sections, simply do 1 / (sections - 1). Array - snap: [0, 0.1, 0.5, 0.8, 1] snaps to the closest progress value in the Array in the direction of the last scroll (unless you set directional: false). Function - snap: (value) => Math.round(value / 0.2) * 0.2 feeds the natural destination value (based on velocity) into the function and uses whatever is returned as the final progress value (in this case increments of 0.2), so you can run whatever logic you want. These values should always be between 0 and 1 indicating the progress of the animation, so 0.5 would be in the middle. "labels" - snap: "labels" snaps to the closest label in the timeline (animation must be a timeline with labels, of course) So as I said, your current number is just coming from this bit of maths. Just FYI - you have four sections. // the maths 1 / (sections.length - 1) // four sections becomes... 1 / 3 All that's saying is 1 divided by 3, that returns 0.3333 which means it's going to snap in increments of a third, 1/3. This is great for evenly spaced sections But these sections aren't even so you'll need to pass in an array of progress values. The best way I've found to get this is to use an onUpdate callback and log out the progress. Like so... Kapture 2022-06-07 at 10.32.04.mp4 Keep an eye on the console for the right progress values and then pop them into your snap array - in this case. snapTo:[0, 0.50, 0.74, 1] Hope this helps! See the Pen ExQeWWg?editors=1011 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 7 Cassie Thank you so much, that is a great help. One more question on this though. When I have a pinned section, the values only go as far as 1 in the console and I do get values for the sections after the pinned one. Do I need to do something different for pinned sections? Thanks Brian Link to comment Share on other sites More sharing options...
Share Posted June 7 Heya - I don't understand this I'm afraid. The values are a point along the progress of the timeline. That progress goes from 0 to 1. There's no such thing as 1.2 Link to comment Share on other sites More sharing options...
Author Share Posted June 7 I understand and I don't get a value greater than 1. It just reaches 1 during scrolling a pinned section so never get a value to snap to beyond that. Will put a demo up later when I get a chance. Thanks anyway Brian Link to comment Share on other sites More sharing options...
Share Posted June 7 Yeah, it can't snap to a value beyond that. That's the final possible value. Pop up a demo when you can because I can't visualise this at all. Thanks! Link to comment Share on other sites More sharing options...
Author Share Posted June 7 Here is a quick demo, added a pinned section that has 2x the section height of content within it. Now when scrolling the console shows it reaches 1 at the end of the pinned content which is correct, but still has the final section below it. I know the other values are now out by adding this pinned section but wanted to illustrate what is happening. See the Pen xxYaLRR by joneslafuente (@joneslafuente) on CodePen Does this make sense or am I missing something? Thanks Link to comment Share on other sites More sharing options...
Author Share Posted June 7 Updated the array values for the snap in this version See the Pen xxYaLRR by joneslafuente (@joneslafuente) on CodePen Link to comment Share on other sites More sharing options...
Share Posted June 7 Ah ok - yeah you were almost there. Just needed to adjust the start and end markers so that you're using the whole scroller, and pop your scrollTriggers in the right order. You also have a few things that aren't needed here - like scrub:0 - that's basically scrub:false which is the default. You're also using the last element inside your pinned element as an end trigger - endTrigger: '#pin .pin-box.last', No need, you can just use the end of the pinned element. I'm not quite sure what your pin content tween is doing either? Doesn't seem to be doing anything? I took it out but let me know if it had a purpose. Adjusted some bits and bobs here... See the Pen eYVLExB?editors=1011 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted June 7 Cassie The pin content tween is the 4 blocks inside the pinned container on the right. Now it only displays the first 2 that are visible. When pinned it scrolls to show the last 2, the last has a class .last added which is the endTrigger. I will take a look through your other changes and see if I can get it working. I understood why it was getting to the value of 1 by the end of my pinned section, just didn't know if there was a way to ignore the pinned content from the scroll value? Thanks again. Link to comment Share on other sites More sharing options...
Share Posted June 7 Ah of course! Updated my pen to include that. Also I was wrong about scrub - scrub:0 would be equivalent to scrub:true which you would obviously need in order to run through that animation. I removed scrub so I wasn't seeing it animate. 🙄 Blonde moments all round there, sorry - not used to seeing scrub: 0 5 minutes ago, JonesLafuente said: just didn't know if there was a way to ignore the pinned content from the scroll value? nope you've lost me again here mate sorry. Link to comment Share on other sites More sharing options...
Author Share Posted June 7 Cassie. You are a STAR. All working! Thanks so much. Brian Link to comment Share on other sites More sharing options...
Solution Author Solution Share Posted June 7 My version with the snap working including each pair inside the pinned section. See the Pen NWyLXre by joneslafuente (@joneslafuente) on CodePen Link to comment Share on other sites More sharing options...
Share Posted June 7 hooray! Nicely done mate Link to comment Share on other sites More sharing options...
Author Share Posted June 7 All down to your help Cassie. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now