Timeline Snapping

[josegtz]

Hello!

First of all, Nice and fantastic work on the update of the GSAP website!

I am trying to achieve something. I've seen some demos, but my case is slightly different, and maybe I need clarification about how snapping works and possible errors I'm having on the setup or the general idea. I'll try my best to explain myself. 

1. I'm trying to pin the container and scroll the inner wrapper by translating it 100%.

2. The last thing I did was to be able to pin to the nearest "start" or the "end" of the section ONLY if it's past the start/end of a section.

 

I attached my code pen example. Sorry if this doesn't go into this forum but I haven't had luck on stack overflow.

 

 

 

 

See the Pen QWYpmGN by jeiemgi (@jeiemgi) on CodePen

[mvaneijgen]

Hi @Jose Miguel Gutierrez welcome to the forum!

 

Great demo, thanks for that! I think there is a misunderstanding. The snap utils function is a function that returns a value to the closest snapping point https://gsap.com/docs/v3/GSAP/UtilityMethods/snap() 

 

But ScrollTrigger also has a snap property, which allows you to snap to certain points of the scroll distance https://gsap.com/docs/v3/Plugins/ScrollTrigger/ 

 

Quote

 

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

 

I've changed some code in your JS, mainly set ease: "none" (by default tweens have an ease of power1.out, which means they start slow and get faster at the end. This will make calculating points rather difficult) and changed your x to xPercent, this property is build for percentage based values, works better that way.

 

And I've set the snap to an array, now it snaps to the beginning and end of the scroll distance and I've set two middle points, which seem to line up with your sections, I'm not really sure where thy get there height from, but you could also do some math and calculate how much each section is based on the total height of all the elements and if you then get how much percent that is, you can feed that to the array. On the ScrollTrigger docs you can see a lot more properties you can set within snap the snap property, what ease it uses, how long it waits before snapping, ect.

 

Hope it helps and happy tweening! 

 

See the Pen JjxWmJE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[josegtz]

@mvaneijgen Thanks so much for your answer, so helpful.

 

Okay, I was using the snap utility wrong.

 

I don't want the snap to happen when I am inside the section content, only if the next or previous element is visible.

It should snap to the end of the previous section if the next section is under 50% of the screen (Image-A). OR it should snap to the start of the next section if the next section is past the center of the screen (Image-B). I've seen there's a radius property. But I haven't had luck using it. 

 

 

 

[Rodrigo]

Hi,

 

For that you have to create your own custom snapping logic. Right now the great example Mitchel created is snapping the ScrollTrigger instance using an array of values, so ScrollTrigger snaps it's progress to the closest value. In your case you would have to use a function and based on the progress value snap to a specific progress value. From the docs:

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

In your case create some custom conditional logic:

ScrollTrigger.create({
  // other configs here
  snap: (value) => {
    if (/* condition for the value */) {
      // Return a specific value where you want to snap
      return anotherValue;
    }
  },
});

If you don't return anything in the snap function, nothing will happen.

 

Hopefully this helps.

Happy Tweening!

[josegtz]

Thanks so much for your help. I think this is what I was looking for; it took me a while to discover that logic, but here's the code for anyone with the same case problem. 
 

See the Pen QWYpmGN?editors=0011 by jeiemgi (@jeiemgi) on CodePen

 

Two questions left.

I tried to make it so you never see the red background, ay ideas on that, so when the content ends it unpins the container. 

How to make it snap faster with the function I have?

Anyways, I'll keep trying, but I appreciate your time. Thanks!

[GreenSock]

Like this?: 

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

 

Use a negative margin on the element underneath the pin, and then use a snap config object where you can define the duration. 

 

Have fun!