Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
TEHbKA

How to implement infinite rotation of a list of items by clicking a button

Recommended Posts

Good day!
I'm sorry for my bad English.
Please tell me how to implement an infinite rotation of the list of elements by pressing the "Start" button with the ability to smoothly stop the rotation on a certain element after 3 seconds. The element is determined randomly each time the "Start" button is pressed. The randomly selected item should stop in the middle of the container.

See the Pen XWNybvK by TEHbKA (@TEHbKA) on CodePen

Link to comment
Share on other sites

Hey TEHbKA and welcome to the GreenSock forums.

 

To do this sort of thing you simply need to figure out how far in the x direction you need to go to position the targeted element in the middle of the container. So you'll need:

  • The position of the middle of the targeted element at the start and
  • The position of the middle of the screen
  • (optionally) how many extra loops you want to do and, if # loops > 0, the width of all of the elements and the gaps between them.

Once you have that info, you simply need to animate the elements that distance over the duration of 3 seconds with the ease that you want.

 

Side notes:

  • Like 2
Link to comment
Share on other sites

Hi ZachSaucier.

Are there any ready-made examples of what I need to do? I do not quite understand how to implement this using this library. 

Link to comment
Share on other sites

I'm not aware of any existing ones off the top of my head. Which part of the steps I gave above is giving you a hard time when implementing it? Can you please share a demo showing where you're stuck?

Link to comment
Share on other sites

20 hours ago, ZachSaucier said:

I'm not aware of any existing ones off the top of my head. Which part of the steps I gave above is giving you a hard time when implementing it? Can you please share a demo showing where you're stuck?

Good day!

I managed to implement the rotation continuously.

Unfortunately, but I can't smoothly stop at some of the elements and get it.

The element should come to a smooth stop in the middle of the container.

How can this be done?

See the Pen MWbPdGg by TEHbKA (@TEHbKA) on CodePen

 

Link to comment
Share on other sites

One way to handle it would be timeScale the timeline like this post:

A different way to handle it would be to make use of the onRepeat callback to do a specific end animation:

 

Side note: You're making at least one common GSAP mistake as well (using the old syntax). I highly recommend giving the article a good read :) 

Link to comment
Share on other sites

38 minutes ago, ZachSaucier said:

One way to handle it would be timeScale the timeline like this post:

A different way to handle it would be to make use of the onRepeat callback to do a specific end animation:

 

Side note: You're making at least one common GSAP mistake as well (using the old syntax). I highly recommend giving the article a good read :) 

You gave a great example of "Manually Stop Spin Wheel using Server Response".
How is it possible to apply it for yourself?
Only I need to rotate the list of tiles

See the Pen MWbPdGg by TEHbKA (@TEHbKA) on CodePen

Link to comment
Share on other sites

Sorry, I don't understand your question. Can you try rephrasing?

Link to comment
Share on other sites

19 hours ago, ZachSaucier said:

Sorry, I don't understand your question. Can you try rephrasing?

Now this is the course of action:
  - press the "Start" button and start the rotation
- select randomly the element on which we want to stop
- will smoothly stop on a preselected element
From this list, I managed to smoothly start and stop, but I can't stop at a random tile.

See the Pen MWbPdGg by TEHbKA (@TEHbKA) on CodePen

Link to comment
Share on other sites

It'd be tough using the timeScale approach because you'd have to make sure the timeScale affects the animation to end up in a pre-defined progress state, which I'm not quite sure how you'd calculate (though it's surely possible). 

 

I'd probably use the onRepeat callback approach. 

 

Also we highly recommend using the GSAP 3 syntax (no Max/Lite stuff, string ease forms, etc.) as covered in the most common GSAP mistakes post.

Link to comment
Share on other sites

28 minutes ago, ZachSaucier said:

Also we highly recommend using the GSAP 3 syntax (no Max/Lite stuff, string ease forms, etc.) as covered in the most common GSAP mistakes post.

That is, instead of TweenLite.set, use gsap.set ?

 

32 minutes ago, ZachSaucier said:

It'd be tough using the timeScale approach because you'd have to make sure the timeScale affects the animation to end up in a pre-defined progress state, which I'm not quite sure how you'd calculate (though it's surely possible). 

Sorry, I did it purely by examples, but I still did not achieve the result

Link to comment
Share on other sites

2 minutes ago, TEHbKA said:

That is, instead of TweenLite.set, use gsap.set ?

Yes, among the other changes in migrating your code to all GSAP 3 format.

 

2 minutes ago, TEHbKA said:

I still did not achieve the result

Sorry, we don't have the capacity to build out everything that people request in these forums. Is there a specific question that we can help you with? A specific piece that you're not understanding or an error that we can resolve?

Link to comment
Share on other sites

Just now, ZachSaucier said:

Sorry, we don't have the capacity to build out everything that people request in these forums. Is there a specific question that we can help you with? A specific piece that you're not understanding or an error that we can resolve?

I understand you perfectly. You are already well done that you support and direct you in the right direction.
The only problem is to make it rotate and stop at some of the elements.

Link to comment
Share on other sites

Good day!

Who can help with this issue?

It is necessary to start smooth sliding of the list and stop at any element.
Was able to implement smooth start and stop sliding of the list of elements. How to make sure that a smooth stop occurs on a random element?

See the Pen MWbPdGg by TEHbKA (@TEHbKA) on CodePen

Link to comment
Share on other sites

@TEHbKA this is absolutely possible, but it's beyond the scope of the help we can offer for free in these forums. We're happy to answer any GSAP-specific questions, but this is much more about logic, math and problem-solving. You could consider posting in the "Jobs & Freelance" forum to hire a consultant or if you'd like to have GreenSock help you with some custom consulting, just reach out to us and we can talk pricing and details. 

 

Good luck with the project!

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

×