mikel Posted January 17, 2020 Share Posted January 17, 2020 Hey Zach, Thanks to your code, I have clearly progressed in understanding. Just for fun and learning I have a question: How does the 'yValue' value come about? Can it be calculated? It doesn't turn around precisely. I use gsap 2.0 for this case because I like the 'old' smooth start / stop function and cannot do this with 3.0. The locomotive is already under construction. But here I have to specify the alignment of the parts. See the Pen bGNjjyZ by mikeK (@mikeK) on CodePen Kind regards Mikel See the Pen WNbaeJR by mikeK (@mikeK) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 17, 2020 Share Posted January 17, 2020 5 hours ago, mikel said: How does the 'yValue' value come about? I used trial and error. 5 hours ago, mikel said: Can it be calculated? It doesn't turn around precisely. Probably. I didn't give it too much thought. The radius / 2 + strokeWidth is close (9.3). Not sure if that's mathematically correct. 5 hours ago, mikel said: I like the 'old' smooth start / stop function and cannot do this with 3.0. What do you mean you cannot do it with GSAP 3? Link to comment Share on other sites More sharing options...
mikel Posted January 17, 2020 Author Share Posted January 17, 2020 Hey Zach, It is a slight offset on the x axis. Unfortunately I can't find a solution with trial and error. Here is the same start / stop function with gsap 3.0. See the Pen VwYEpeW by mikeK (@mikeK) on CodePen Thanks for your engagement. Mikel Link to comment Share on other sites More sharing options...
mikel Posted January 19, 2020 Author Share Posted January 19, 2020 Hey Zach, With a different approach (including svgOrigin) it now runs perfectly on the 'wheel'. But the problem has shifted to the other side. However, the effects here are minimal. See the Pen GRgYaVJ by mikeK (@mikeK) on CodePen Kind regards Mikel 2 Link to comment Share on other sites More sharing options...
GreenSock Posted January 20, 2020 Share Posted January 20, 2020 Sorry about that, @mikel - there was a regression in 3.0.5 that caused tweening of timeScale() on another animation not to always work as expected. That should be resolved in the next release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js - is that better? 1 Link to comment Share on other sites More sharing options...
mikel Posted January 20, 2020 Author Share Posted January 20, 2020 Hey Jack, The latest beta doesn't like .timeScale (0) either. We had spoken about it before. Is there a simple alternative for smooth start / stop? See the Pen rNaZrjb by mikeK (@mikeK) on CodePen timeScale(0) See the Pen XWJyxvZ by mikeK (@mikeK) on CodePen Kind regards Mikel 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 20, 2020 Share Posted January 20, 2020 Thanks for pointing that out - it should be resolved now in the latest beta. Just hard-refresh. Better? 1 Link to comment Share on other sites More sharing options...
mikel Posted January 21, 2020 Author Share Posted January 21, 2020 See the Pen rNaQPbY by mikeK (@mikeK) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted January 21, 2020 Share Posted January 21, 2020 @mikel that means it's all good now, right? You've been very talented at finding edge cases and glitches, so it's excellent news if you can't find any now 1 Link to comment Share on other sites More sharing options...
mikel Posted January 21, 2020 Author Share Posted January 21, 2020 Hey Jack, Start / stop is running smoothly - excellent. When the locomotive is ready, it can start up gently. See the Pen jOEQerE by mikeK (@mikeK) on CodePen But the drag part does not run as expected, as in gasp 2.0 - see above. Kind regards Mikel Link to comment Share on other sites More sharing options...
GreenSock Posted January 22, 2020 Share Posted January 22, 2020 7 hours ago, mikel said: But the drag part does not run as expected, as in gasp 2.0 - see above. That's actually more of a "bug" in GSAP 2, and the fix is easy for GSAP 3. Let me explain... You're setting your rotation INSIDE of an onUpdate of a tween, but when you seek(), the default "suppressEvents" parameter is false, so it never calls the onUpdate! That's why your rotation isn't getting set. Easy fix: either set suppressEvents to false, like master.seek(this.x/40, false) or just use master.time(this.x/40) because the default suppressEvents for time() is false. Why was it working in v2? Because even when you set timeScale(0), it never actually let the timeScale be 0 (to avoid math issues with dividing by 0) - it made it a super small number. Since you didn't pause it, that means that technically the master tween kept running! So onUpdate was being called on every tick! Drop a console.log() in there and you'll see. Thus your rotation was getting set all the time. See why I'd consider that more of a "bug" with v2? Maybe not necessarily a "bug", but a little weird at least. Does that clear things up? 2 Link to comment Share on other sites More sharing options...
mikel Posted January 22, 2020 Author Share Posted January 22, 2020 Hey Jack, Thank you for the detailed explanation. Here the result: See the Pen abzXORy by mikeK (@mikeK) on CodePen Kind regards Mikel 2 Link to comment Share on other sites More sharing options...
GreenSock Posted January 22, 2020 Share Posted January 22, 2020 Nice work @mikel! Link to comment Share on other sites More sharing options...
OSUblake Posted February 29, 2020 Share Posted February 29, 2020 On 1/22/2020 at 1:28 PM, mikel said: Maybe I should do a course at @OSUblake. Yes, you should! I'm accepting new applicants. Lesson 1: Use a sine.inOut ease to convert circular motion to linear motion. Lesson 2: Check out the new .convertCoordinates() function in the MotionPathPlugin. See the Pen f5931e9308bc4380532a804fc8163589 by osublake (@osublake) on CodePen 4 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 29, 2020 Share Posted February 29, 2020 On 2/29/2020 at 3:22 AM, OSUblake said: On 1/22/2020 at 1:28 PM, mikel said: Maybe I should do a course at @OSUblake. Yes, you should! I'm accepting new applicants. I hear ya @mikel, I've been doing the free course for years, invaluable. If I had a dollar for every categorized topic folder on my computer that ended in: " -- OSUBlake", I could maybe afford the paid course by now. I have nightmares that there remains some post on the forum brimming with knowledge dust that I have missed - True story. 😄 That applies to so many users (a few mentioned here). People should really not hesitate to take advantage of the "search" feature, can't express that enough. 3 Link to comment Share on other sites More sharing options...
mikel Posted March 1, 2020 Author Share Posted March 1, 2020 Hey @OSUblake, As cool as a dry martini! Thanks Mikel P.S.: waiting for hints 'MotionPathPlugin.convertCoordinates' in the docs (?). Link to comment Share on other sites More sharing options...
GreenSock Posted March 2, 2020 Share Posted March 2, 2020 22 hours ago, mikel said: P.S.: waiting for hints 'MotionPathPlugin.convertCoordinates' in the docs (?). Your wish is my command https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates() 3 Link to comment Share on other sites More sharing options...
mikel Posted March 2, 2020 Author Share Posted March 2, 2020 Hey JACK, Thank you so much. Also for the cool demo. Very helpful tool. Let´s go ... Mikel 1 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