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
https://codepen.io/swingingTom/pen/qBPBQQP
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 :
https://codepen.io/swingingTom/pen/NWaWOXX
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.
https://codepen.io/swingingTom/pen/GRMRYav
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.