Animate path points in canvas/Pixi.js

[marcodellabate]

Hello,
I am trying to achieve something very similar to the codepen but with PixiJs instead of SVG.
I can't find recent or accurate information on how to animate paths through GSAP into PixiJs v5, I can only find information about animating the drawing of a line, but not about tweening the points themselves.

More specifically, what I'm trying to achieve is to tween the position of the mid point of a bezier curve made up of 3 points.

 

Can anyone give me a lead?
Thanks much appreciated

 

See the Pen MazWqb by chrisgannon (@chrisgannon) on CodePen

[ZachSaucier]

Hey marcodellabate. How about you create a basic pen that has a path in Pixi and show your attempt at animating it? Then we can give you feedback relevant to your actual situation. 

 

[marcodellabate]

See the Pen vYKaBXq by shiedesign (@shiedesign) on CodePen

This is basically what I want to do, these are the two eyelids (they are coded so that they take up the whole viewport in width and height). What I want to achieve mainly is to Tween the arcs so that they morph from an horizontal line to the arc shown in the codepen.
The type of animation is very similar to the pen in the first post: an horizontal line that draws from left and then the eye that opens.

Is there any way to animate the control points directly through gsap?

[ZachSaucier]

Seems like a perfect job for SVG. Why do you need to use Pixi?

 

Anyway, to animate that sort of thing with GSAP you'd need to use an object values, animate those objects, then redraw your lines.

[marcodellabate]

Do you mind clarifying how to use objects for canvas paths?

[ZachSaucier]

Pseudo-code:

const widthObj = { val: 500 };

// Animated via 
gsap.to(widthObj, { val: someVal });

// Every update you draw it via
upEyeLid.lineTo(widthObj.val, 0);

 

[marcodellabate]

See the Pen KKMBMQr by shiedesign (@shiedesign) on CodePen

I created a simple pen trying to apply what you said but there is no animation happening on the endpoint. What am I getting wrong?

[ZachSaucier]

You need to redraw then you update the object  

See the Pen MWeBeXR?editors=0010 by GreenSock (@GreenSock) on CodePen

[marcodellabate]

Amazing, the onUpdate did the trick!! 
Thanks so much for the help