How to snap each section on scroll and not skip section when strong scroll?

[Kency]

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

I found this solution(demo below) but I am having trouble applying it to the my demo (demo above). Thanks

 

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

[Cassie]

Hi there!

I've taken a look and these pens contain completely different approaches. It's not really clear what you've tried or what you're confused about.

Did you have a GSAP-specific question about them? We're happy to answer questions about how pinning or toggleActions works (etc) - but unfortunately we just don't have the resources to walk through or create custom solutions from combinations of demos found around the forums..

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question we'd be happy to answer it.

 

[Kency]

20 hours ago, Cassie said:

Hi there!

I've taken a look and these pens contain completely different approaches. It's not really clear what you've tried or what you're confused about.

Did you have a GSAP-specific question about them? We're happy to answer questions about how pinning or toggleActions works (etc) - but unfortunately we just don't have the resources to walk through or create custom solutions from combinations of demos found around the forums..

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question we'd be happy to answer it.

 

Thank you so much. Actually I only ask have any solution 'snap to next section' when strong scroll on this demo 

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

 . 

[Cassie]

Hey!

 

So the first demo is making use of position:sticky to pin and then using scrollTo plugin to jump to a point in the page.

The one you want to adjust is a scrollTriggered horizontal animation with directional snapping.

These are completely different so it's not going to be possible to 'merge' the code to create the functionality you're after. It sounds like what you're after is the tweened and limited snapping behaviour of the first - but horizontal? Maybe this demo will give you a step in the right direction

See the Pen qBomXqz?editors=0111 by GreenSock (@GreenSock) on CodePen

It's using Observer plugin instead of scrollTrigger so rather than scrolling down a page it's triggering animations on events.

 

I hope this helps.
 

[Kency]

On 7/21/2022 at 4:14 AM, Cassie said:

Hey!

 

So the first demo is making use of position:sticky to pin and then using scrollTo plugin to jump to a point in the page.

The one you want to adjust is a scrollTriggered horizontal animation with directional snapping.

These are completely different so it's not going to be possible to 'merge' the code to create the functionality you're after. It sounds like what you're after is the tweened and limited snapping behaviour of the first - but horizontal? Maybe this demo will give you a step in the right direction
 

 

It's using Observer plugin instead of scrollTrigger so rather than scrolling down a page it's triggering animations on events.

 

 

 

I hope this helps.
 

Thank you very much for your enthusiasm.