Jump to content
Search Community

Karliky

Members

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Posts posted by Karliky

    How to do soft bezier with MotionPath

    in GSAP

    Posted

    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 👍

    How to do soft bezier with MotionPath

    in GSAP

    Posted

    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 :)

    • Like 2

    How to do soft bezier with MotionPath

    in GSAP

    Posted

    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):

    See the Pen zYvJjyr by karliky (@karliky) on CodePen

     

    GSAP 3 / Three.js (softPointsToCubic type cubic)

    See the Pen QWjVrzo by karliky (@karliky) on CodePen

     

    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!

     

     

     

    • Like 3

    How to do soft bezier with MotionPath

    in GSAP

    Posted

    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!

    How to do soft bezier with MotionPath

    in GSAP

    Posted

    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.

    How to do soft bezier with MotionPath

    in GSAP

    Posted

    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! :) 

    How to do soft bezier with MotionPath

    in GSAP

    Posted

    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. 

     

    How to do soft bezier with MotionPath

    in GSAP

    Posted

    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.

    How to rotate using MotionPath

    in GSAP

    Posted

    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.

    How to rotate using MotionPath

    in GSAP

    Posted

    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.

    How to rotate using MotionPath

    in GSAP

    Posted

    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.

    How to rotate using MotionPath

    in GSAP

    Posted

    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

    See the Pen rNOzjLv by karliky (@karliky) on CodePen

×
×
  • Create New...