cindy Posted February 8, 2021 Share Posted February 8, 2021 Hi, as a learning experiment would like to pause an animation when the square hits the X axis to his half, then when the user click the button I would like to resume or reverse the animation, is this possible without using timing? Thanks in advance. See the Pen qBqNOWj by CindyR (@CindyR) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 8, 2021 Share Posted February 8, 2021 Hey Cindy and welcome to the GreenSock forums. 2 hours ago, cindy said: when the square hits the X axis to his half What do you mean by this? Do you mean when the right edge of the square is at the middle of the viewport? And does it need to have the bounce ease? 2 hours ago, cindy said: when the user click the button I would like to resume or reverse the animation How is the logic of whether it should resume or reverse determined? 2 hours ago, cindy said: is this possible without using timing? What do you mean "using timing"? Link to comment Share on other sites More sharing options...
cindy Posted February 8, 2021 Author Share Posted February 8, 2021 hi, thanks for reply, at the end of the animation the square is at transform: translate(400px, 0px); I want to pause the animation when the square hits 200px and yes it need to be bounced, if not I would just paused the animation on 0.5, On the click of the button I don't care much about it, It could just resume the animation for now, so it would go from 200px to 400px. By using timing I mean that I know how to pause, play the animation using the progress logic, but using bounce as effect doesn't allow me to stop the animation in half, because the square won't be exactly at 200px Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 8, 2021 Share Posted February 8, 2021 I would create two animations: One that animates the box to an x of 200px. Then you can enable the button to play another animation to an x of 400 px. If that doesn't work for your end effect please try to better describe the end effect that you need better instead of what you think you need Link to comment Share on other sites More sharing options...
mikel Posted February 8, 2021 Share Posted February 8, 2021 Hey @cindy, A special solution using Draggable.hitTest See the Pen RwoRGPz by mikeK (@mikeK) on CodePen Happy hittesting ... Mikel Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 8, 2021 Share Posted February 8, 2021 1 hour ago, mikel said: A special solution using Draggable.hitTest The problem with that is that it doesn't have the bounce ease in the middle like cindy requested in her last message. So I don't think any sort of pausing in the middle would be a possible solution. Link to comment Share on other sites More sharing options...
Solution mikel Posted February 8, 2021 Solution Share Posted February 8, 2021 Hey ZACH, It was more of 'special' fun. The question here: Why doesn't GREEN 'stop' precisely at the HIT? I can't understand Cindy´s problem with ease. See the Pen abBZJyQ by mikeK (@mikeK) on CodePen Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 8, 2021 Share Posted February 8, 2021 2 minutes ago, mikel said: Why doesn't GREEN 'stop' precisely at the HIT? onUpdate happens every time the tween updates. It doesn't run more often than that. If the rate of movement is very high, then part of the box's bounds might be past the hit test when the onUpdate fires. If you change the duration to something bigger (like 15) then you can see that it stops more closely to the hitTest. Link to comment Share on other sites More sharing options...
cindy Posted February 8, 2021 Author Share Posted February 8, 2021 6 minutes ago, mikel said: It was more of 'special' fun. Yes, it was a nice approach, however doesn't solve the problem in a pixel perfect way, but the addPause() method will do, I think I'll keep on that direction. Thanks Link to comment Share on other sites More sharing options...
GreenSock Posted February 8, 2021 Share Posted February 8, 2021 The challenge is to map the exact spot of that ease to the progress where the x value is what you want which isn't trivial. You could iterate over the ease until the value passes it and do some basic interpolation to estimate it, then tween to that progress value like this: See the Pen NWbrgwK?editors=0010 by GreenSock (@GreenSock) on CodePen I added the snap just so that it doesn't land at a value like 199.9954. Here's the helper function where you can pass in a linear progress value (0.5 in this case since 200 is halfway between 0 and 400), the ease, and optionally a precision value (500 default): function mapLinearProgress(progress, ease, precision) { ease = gsap.parseEase(ease); precision = precision || 500; let inc = (1 / precision), p; for (let i = 0; i < 1; i += inc) { p = ease(i); if (p > progress) { let prev = ease(i-inc); return i - inc + ((progress - prev) / (p - prev)) * inc; } } return 1; } I hope that helps. 2 Link to comment Share on other sites More sharing options...
mikel Posted February 8, 2021 Share Posted February 8, 2021 No challenge - just for fun. See the Pen yLVJzNx?editors=0010 by mikeK (@mikeK) on CodePen Happy bouncing ... Mikel 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