Karliky

Roses are red, violets are blue, Isn't GSAP super cool? or is it just you @GreenSock? Please make this happen ?

Thanks @GreenSock I knew you were not ignoring it, I just wanted to do a follow up. I know you have a very in depth knowledge of all the code. I've been trying to migrate BezierPlugin to the GSAP 3 API just to see if it was easy to do. What I tried was to migrate new Segment() from the BezierPlugin API to MotionPathPlugin. This is what I tried: - Add Segment function to MotionPathPlugin https://github.com/greensock/GSAP/blob/2.1.3/src/esm/BezierPlugin.js#L21-L35 - When MotionPathPlugin receives a new type called 'soft', parse the points with this function https://github.com/greensock/GSAP/blob/2.1.3/src/esm/BezierPlugin.js#L220-L259 - On plugin init, do something like this._beziers = _parseBezierData(values, vars.type, first);' when type: soft is present. - It seems that set(v) and render(ratio, data) differ from the arguments they receive, so I couldn't continue after this point. I wanted to follow this approach as this will make it work exactly like in GSAP 2. Anyway, I guess you already have your own solution It's just that I've been breaking my head with this too. ? Thank you ?

This is a friendly reminder to let you know that some of us are waiting for this @GreenSock thanks for your support

What's a popup for you? Is it a modal box? You may want to look at this https://codyhouse.co/demo/svg-modal-window/index.html

Samuel you can use Gsap 2 for now if you are in a rush. Just check out the example of the thread linked above.

I have updated both codepen examples in the post above as I think they now show the problem clearly. As you can see, GSAP 2 moves the camera smoothly around the whole path. GSAP 3 movement "twerks/bumps/jumps" and doesn't even follow the same path even though they have the same input. The config for each example: GSAP 2: bezier: { values: keyframes, curviness: 0.1, type: 'soft', timeResolution: 0, }, GSAP 3 motionPath: { path: softPointsToCubic(keyframes, cinematicValues, 0.1), type: 'cubic', resolution: 0 }, Thanks

Hey @OSUblake and @GreenSock! I pledge you all to read and watch this carefully. Thanks for putting all of that effort on this. Here are my results using GSAP 2 and GSAP 3. First of all, please note that, this is not that I want support for Z or 3D support on MotionPathPlugin. It's more that I expect MotionPathPlugin to treat any property the same way BezierPlugin does for the same input. Watch this video, animated with GSAP2: https://youtu.be/RgrhY0oMrF8 Now watch this video, animated with GSAP3: https://youtu.be/IyIZE276vmI Here is the same video with side by side comparison: https://youtu.be/PzYNoRFi9gU You can clearly see that GSAP 2 follows the path in a smooth way, and GSAP 3 does bump/jump everytime it gets to a point. My project is an in-game cinematic tool that is based on this GSAP 2 type soft animation. If I migrate to GSAP 3, no one could create a cinematic as no one wants its camera to bump/jump every x seconds. Please note that both videos used the same input. Here are 2 codepens, one using GSAP 2 and other one using GSAP 3. GSAP 2 / Three.js (BezierPlugin type soft): https://codepen.io/karliky/pen/zYvJjyr GSAP 3 / Three.js (softPointsToCubic type cubic) https://codepen.io/karliky/pen/QWjVrzo If you take a look at the GSAP 3 example. You can clearly see that bump/jump/whatever it's called from time to time. To me, it looks that even though BezierPlugin and MotionPathPlugin can solve the same problem, they are essentially different. I hope this makes it clear the problem I'm having with GSAP 3 and why I can't migrate to GSAP 3. Thanks in advance!

The demo looks that is working as expected compared with GSAP 2, but in my tests the values are "bumping" from time to time on GSAP 3. I'm writin a Three.js demo so you can both take a look but it will take me some time to do it so please wait until I finish it. thank you!

Of course, just take the time you need. ?

Any comments on this? @GreenSock

I would say that you need to set transformOrigin to center center transformOrigin: "center center" But that doesn't make it work ? EDIT: Ok, I think this is what you want, it spins from the center of the wrapper. Just take a look to the position relative/absolute I added https://codesandbox.io/s/beautiful-ptolemy-mtmeq?fontsize=14&hidenavigation=1&theme=dark

I would say that it's not a GSAP issue but a HTML/CSS issue. Anyway, I think you should wrap the HTML in a container whose position relative and remove the relative from the img-wrapper: https://codepen.io/karliky/pen/eYpKLmY

I have read both source code of 2.1.3 BezierPlugin.js and 3.2.6 MotionPathPlugin.js. To me it's pretty clear that MotionPathPlugin.js can't handle any other property but x/y, the code is highly coupled to that concept with vars like this. var _xProps = ["x", "translateX", "left", "marginLeft"], _yProps = ["y", "translateY", "top", "marginTop"], So I don't think there is a way ti make MotionPathPlugin work with any other property, BezierPlugin was agnostic to the input altought MotionPathPlugin is not. The solutions that my mind come up are complicated and difficult to mantain: - Migrate BezierPlugin to GSAP 3.x - Write my own implementation of a Cubic Bezier whose agnostic to the properties passed. - Pass properties to gsap.to that are decoupled into X/Y by using Math.cos/Math.asin, then convert them back to a proper value inside onUpdate by calling Math.atan2, this will make it work for GSAP 3, however it involves creating. complicated code base which is outside the scope of my project.

That defenitely works for X and Y, and what I see is that the movement is smooth which is what I was looking for. But as you said, Z is not being animated, nor any of the other properties like yaw/pitch/roll. GSAP 2 was able to animate any property, let's see what @GreenSocksais about this issue. It looks like when setting type:cubic all the values are ignored but x/y. thank you!

Hey @OSUblake, thanks for your help. So the problem with that approach is that a SVG path assumes to have a point vector X/Y, in my case I have a 3D vector X, Y, Z among other properties like Yaw/Pitch/Roll. The question is, how to animate all of those properties, who are not 2D vectors. This is how my JS object looks like in GSAP 2: const cinematicValues = { "x": 1282.3004150390625, "y": -4295.484375, "z": 38.27876281738281, "yawCos": -0.9832111580884312, "yawSin": 0.18247141861235708, "pitch": 0.18669402599334717, "roll": 0 }; Each keyframe is an object with those same values moved to some point: keyframes = [ { "x": 1319.0740966796875, "y": -4324.2041015625, "z": 51.754337310791016, "yawCos": -0.3853230395894568, "yawSin": -0.9227817483899114, "pitch": -0.49398455023765564, "roll": 0 }, { "x": 1245.7869873046875, "y": -4298.46142578125, "z": 38.76139450073242, "yawCos": -0.9444551739729924, "yawSin": -0.32864026587690787, "pitch": -0.1405552178621292, "roll": 0 }, ...] That softBezier function can't handle that input, also I'm not sure of how to properly adapt it as the Path uses the Q command to create a quadratic curve. thanks in advance.

Hi all, I'm using GSAP 2 and I want to migrate to GSAP 3. In order to do it, I need to use the type "soft" point control from GSAP 2, like this: bezier: { values: keyframes, curviness: 0, type: 'soft', timeResolution: 0, }, I see no way to do that kind of animation with GSAP 3, I found the "soft" implementation here: https://github.com/greensock/GSAP/blob/2.1.3/src/esm/BezierPlugin.js#L220-L260 Is there any way to perform a Bezier animation like the described above with GSAP 2 on the version 3?. I see this like a regression in the GSAP Api and I can't migrate to the version 3.

I will try to reproduce It in a test case but It will take some time to do It, thank you!

Hey @GreenSock! Thanks for your help. To me, that looks defenitely closer to what I'm looking for. However, I've implemented it and it looks like there is something wrong. I'm not sure if it's ready to manage multiple values of a motion path in a linear way - ease:none-. It looks like it moves "erratic" somehow. Just take a look at this video I recorded, it uses your relativize function. As you can see, on second 0:33, the camera starts looking to the right, it should look forward. so, I decided to break the problem into a small test. Here, I just make the camera rotate around. I expect Gsap to move the camera smoothly among all the points. Instead, what I see is that the angle goes from one point to another one then STOP, again one to another then STOP, and so on.... So, it looks that the angle is not being interpolated in a linear way like the X/Y/Z values. Take a look here at second 0:17: The camera angle should move smoothly as you can see in this video - which uses a custom code I wrote, not using TweenMax-: thanks for your help.

I've already tried that before opening this issue. That doesnt work for MotionPath values, right? That's just a rotation from angle A to angle B. But how do I anímate it like angle A to angle B to angle C... I expect the MotionPath to animate angles too as It can animate normal values.

That makes sense but the values are still wrong in that codepen. The shortest path for an angle at 350 degrees to 10 would be to go from 350 to 351, 352, 353..360...1,2,3,4,5,6,7,8,9,10. And not going down from 350 to 10.

Hi all, First of all, thanks for creating such an amazing library. I'm trying to animate a custom object, not an element. I have an issue by rotating an angle in the shortest path when using the MotionPath plugin. The codepen attached shows this output: 339.13821_short 337.09226_short ... 235.45931_short 227.64605_short 218.87541_short 211.19844_short ... 162.97689_short 154.24792_short 146.05995_short 138.41946_short 130.7989_short 122.80199_short 115.38985_short ... 61.25881_short 55.98172_short 50.92818_short 46.11003_short 41.53912_short 37.47354_short 33.7308_short 30.77445_short 27.65545_short ... 12.07978_short 11.33946_short 10.7879_short 10.35917_short 10.09559_short 10.00119_short 10_short I expect it to follow the shortest path, so the values would look more like this: 351.13821_short .... 359.24124_short .... 1.13821_short .... 5.13821_short .... 10_short Please note that I'm using the MotionPath API, I need to rotate that angle to many different values. Setting autoRotate: true sticks the value at 18.43495_short which is weird. thanks in advance, Cheers