Navigation and scrolling in a fixed-height block

[wanatv]

Hello!
I have a block in it has 3 blocks with a fixed height.
I use the snap option.
When I scroll the wheel of the mouse everything is fine, switches the blocks 1,2,3.
It also switches perfectly when you click on the navigation in the form of a circle.
But when we go to 3 blocks and if you click 2 points in the navigation in it, then we go first to 2 blocks, and then immediately to the first.
Tell me what the problem might be?
Thank you!

See the Pen dyqeMGB by devsss1213 (@devsss1213) on CodePen

[Rodrigo]

Hi @wanatv and welcome to the GreenSock forums!

 

There are a few issues in your setup. First you have three sets of indicator dots, any particular reason for that? Just one should be enough to get the job done, no need to add a new set to every element since that throws off the index values of the loops and makes you run two unnecessary loops.

 

Also keep in mind that ScrollTrigger records the start and end positions (100% reliable scroll positions) so is better to use those instead of making calculations.

 

Here is a fork of your codepen:

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

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

[wanatv]

1 hour ago, Rodrigo said:

Hi @wanatv and welcome to the GreenSock forums!

 

There are a few issues in your setup. First you have three sets of indicator dots, any particular reason for that? Just one should be enough to get the job done, no need to add a new set to every element since that throws off the index values of the loops and makes you run two unnecessary loops.

 

Also keep in mind that ScrollTrigger records the start and end positions (100% reliable scroll positions) so is better to use those instead of making calculations.

 

Here is a fork of your codepen:

 

 

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

Thank you very much!
Yes, you are right I did not use the calculations correctly.
It was necessary to use ScrollTrigger calculations.
Now everything is fine!