Jump to content
GreenSock

JonesLafuente

Parallax sections and snap - is it possible?

Go to solution Solved by JonesLafuente,

Recommended Posts

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

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

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

  • Like 1
Link to comment
Share on other sites

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

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...
   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

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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

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

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

Cassie. You are a STAR. All working!

 

Thanks so much.

 

Brian

Link to comment
Share on other sites

  • Solution

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

hooray! Nicely done mate

Link to comment
Share on other sites

All down to your help Cassie.

  • Thanks 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.
×