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.