TEHbKA Posted March 9, 2021 Share Posted March 9, 2021 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 More sharing options...
ZachSaucier Posted March 9, 2021 Share Posted March 9, 2021 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: You're using some of the old syntax for your eases. We recommend using the condensed string format. For more info see the most common GSAP mistakes. You could use GSAP's built in random utility instead of having to write your own if you'd like. 2 Link to comment Share on other sites More sharing options...
TEHbKA Posted March 10, 2021 Author Share Posted March 10, 2021 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 More sharing options...
ZachSaucier Posted March 10, 2021 Share Posted March 10, 2021 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 More sharing options...
TEHbKA Posted March 11, 2021 Author Share Posted March 11, 2021 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 More sharing options...
ZachSaucier Posted March 11, 2021 Share Posted March 11, 2021 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 More sharing options...
TEHbKA Posted March 11, 2021 Author Share Posted March 11, 2021 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 More sharing options...
ZachSaucier Posted March 11, 2021 Share Posted March 11, 2021 Sorry, I don't understand your question. Can you try rephrasing? Link to comment Share on other sites More sharing options...
TEHbKA Posted March 12, 2021 Author Share Posted March 12, 2021 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 More sharing options...
ZachSaucier Posted March 12, 2021 Share Posted March 12, 2021 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 More sharing options...
TEHbKA Posted March 12, 2021 Author Share Posted March 12, 2021 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 More sharing options...
ZachSaucier Posted March 12, 2021 Share Posted March 12, 2021 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 More sharing options...
TEHbKA Posted March 12, 2021 Author Share Posted March 12, 2021 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 More sharing options...
TEHbKA Posted March 16, 2021 Author Share Posted March 16, 2021 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 More sharing options...
GreenSock Posted March 17, 2021 Share Posted March 17, 2021 @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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now