Jump to content
GreenSock

swingingtom

MotionPathPlugin - 1D cubic path issue

Recommended Posts

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

Link to comment
Share on other sites

Welcome to the forums thom!

 

You might want to change your username so spammers don't find it.

 

I don't think the MotionPathPlugin can currently handle 1D values like that, so I would just feed it the 2D values, and then use the modifers plugin like so...

 

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

 

  • Like 1
Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

3 hours ago, swingingtom said:

But I guess not in a cubic way.

 

Yeah, it handles x and y differently for cubic, which is kind of described here.

 

 

All other properties use the smooth algorithm.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×