Stop infinite animation at a specific position

[NikitaKurnosov]

Dear GSAP Team,

 

I'm currently trying to work with an infinite animation and trying to solve the problem of how I can stop it from running at a specific position in the action.

Please, check codepen example, when you click on the Start button, an animation is started that starts an endless cycle of scrolling items, when you enter a certain number in the input field and click on the Stop button, I want the item with this number to be in the middle of my container the next time it appears on the screen.

 

Could you please help to resolve that issue and stop animation on a specific item in the center of the container?

 

Thank you in advance!

See the Pen ZEamOPz?editors=1111 by kurnosovnikita (@kurnosovnikita) on CodePen

[mikel]

Hey @NikitaKurnosov,

 

There may be several solutions:

 

See the Pen abmPjxz?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[NikitaKurnosov]

Hey @mikel, thanks for the answer.

The example really shows how you can make an infinite scroll with items.

But my main question is to stop it exactly in the middle of the container on a specific item, so this does not help me solve my problem.

 

Please, look at the updated example: 

See the Pen qBVQjwa?editors=1111 by kurnosovnikita (@kurnosovnikita) on CodePen

I've added "data-id" on each ".box" element and tried to determine the target position where I would like to stop the timeline.

 

Thanks,

Nikita

[mikel]

Hey,

 

You need a clever condition.
I love GSAP Draggable.hitTest

 

See the Pen LYOXjqm by mikeK (@mikeK) on CodePen

 

Is this what you expect?

Edit: you need a second condition for 'toLeft' !!

 

Happy tweening ...

Mikel

 

[NikitaKurnosov]

Hey,

 

Yes, that's exactly what I was looking for and that works! Thank you!

 

I wondered if we could increase the speed by reducing the animation time to 1 so that our elements move pretty fast. Is there any way to increase the accuracy of stopping to one place, otherwise in this case it will stop in a range of up to about 10-15 pixels in my tests.

 

Best regards,

Nikita

[OSUblake]

22 minutes ago, NikitaKurnosov said:

Is there any way to increase the accuracy of stopping to one place, otherwise in this case it will stop in a range of up to about 10-15 pixels in my tests.

 

That's just a general problem with doing collision detection, you can't detect exactly when something reaches that threshold due to the time difference between update. 

 

If you're trying to stop the animation somewhere, it would probably be better to manipulate the actual animation. For example, you could animate the time or progress to a certain position. Just a quickie demo where I'm stopping the animation when the time is 2. So with a little math, you can calculate where something should be at a certain time.

 

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

 

[mikel]

 

Cool. For the archive

 

See the Pen QWOJmyQ by mikeK (@mikeK) on CodePen