[MotionPathPlugin - 1D cubic path issue]

Thanks @OSUblake for the advice, thats the first thing I did after posting.

 

Quote

I don't think the MotionPathPlugin can currently handle 1D values like that

It can according the to scale demo codepen from documentation page : 

See the Pen vYBVQap by GreenSock (@GreenSock) on CodePen

But I guess not in a cubic way.

 

The modifiers plugins seems way better than my workaround.

 

 

[motionPath - bezier]

It wasn't easy for me to understand the composition of a MotionPath  path:[]  property when type:cubic

 

Especially the following statement confused me : 

Quote

in the following order: anchor, two control points, anchor, two control points, anchor, etc.

 

I wasn't able to correctly identify the sequence. Especially that the first anchor is always the StartPoint(M moveTo). 

I was able to produce a single curve : M+C ( 4 items array ) 

 

But attempts to produce more complex path :  M+C+C led to animated object to disapear.

No hints from the console.

Even if the provided points length was invalid ( If correctly understood, a valid length for a cubic motionpath is always 3n+1 )

 

And to be fully honest, Once understood, we see how much a conversion is easy.
Just like a no-brainer : 
 

<path d="M0,0 C50,0 100,50 100,100"></path>

//  "M0,0      C50,0       100,50       100,100" // simply remove letters from svg data path
//  " 0,0       50,0       100,50       100,100"
// and that's it, make points objects
//[{x:0,y:0},{x:50,y:0},{x:100,y:50},{x:100,y:100}]

 

No matter how long the path is, it's simply follow the sequence defined in the svg. That's brilliant. But it seems I wasn't prepared for such easy stuff.

 

So a cubic motion path array is : 

StartPoint(anchor), Curve1(controlPoint1,controlPoint2,anchor),Curve2(controlPoint1,controlPoint2,anchor),etc...

 

At least now, this is written here for future me.

[MotionPathPlugin - 1D cubic path issue]

Hi GSAP Team & Contributors,  

 

I've had hard times to make "1D cubic path" working.

According to the following codepen, simply extracting the y property of a working curve data doesn't produce the same tween : 

let points = [{x:0,y:0},{x:50,y:0},{x:100,y:50},{x:100,y:100}]; // Reference Y
let yValues= [{y:0}    ,{y:0}     ,{y:50}      ,{y:100}]; // Not the same tween/smoothing

GreenBall is 2D cubic path, as BlueRect is 1D cubic path using the same values

See the Pen qBPBQQP by swingingTom (@swingingTom) on CodePen

 

A workaround a could have imagine is to tween another fake property in order to have a two-dimensional properties

let points = [{x:0,y:0}  ,{x:50,y:0}  ,{x:100,y:50}  ,{x:100,y:100}]; // Reference Y
let yValues= [{y:0,foo:0},{y:0,foo:50},{y:50,foo:100},{y:100,foo:100}]; // Not the same tween/smoothing

But according to this codepen, it won't work : 

See the Pen NWaWOXX by swingingTom (@swingingTom) on CodePen

 

I start to believe that `type:cubic` require both `x` and `y` property to produce the cubic smoothing.

 

 

For now, my only working workaround is to animate a proxy target, that only reports "y" property on the real target to be animated. 

See the Pen GRMRYav by swingingTom (@swingingTom) on CodePen

 

gsap.to(proxyTarget, {
      duration: 3,
      ease: "none",
      repeat: -1,
      yoyo: true,
      motionPath: {
        path: cubicPoints2D,
        type: "cubic"
      },
      onUpdate: function () {
        gsap.set(realDisplayTarget, { y: proxyY.y });
      }
    }),

 

I know that looks more like I should use CustomEase for the prodived cases, but I would like to know better the cubic motionpath features and its limitations.

 

 

 

 

See the Pen bGoGxQw by swingingTom (@swingingTom) on CodePen