motionpath Bezier curve issues (MotionPath)

[Eirinn 0 Likes (Newbie)]

Steps to reproduce:

Open Codepen Link, it will probably look sort of fine embedded, but it'll be obvious if you resize the screen so the boxes form a 2x2 pattern. Click a box.

 

Goal:

To have the boxes animate into the middle from their current position in a nice smooth curve (inwards).

 

Issue:

Top left box behaves completely as expected, the rest do not.

 

Details:

I'm using MotionPath to animate the boxes into the middle in a curved fashion. According to my math the coordinates should be fine, but the animations are erratic. I'm not entire sure what's going on. If i were to hazzard a guess it would be that the coordinates are correct, but the "handles" in the bezier curve are off?.

See the Pen c4c0f5156c44a99655bb397b079cb886 by rosefalk (@rosefalk) on CodePen

[OSUblake 18,475 Likes (Superhero)]

I didn't dig into your code, but here's how I do arcs.

See the Pen fe6af24fc80f10117b7a07deb594b3de by osublake (@osublake) on CodePen

 

You can also create an arc motion by animating x and y with different eases. cc @Carl

 

 

[Eirinn 0 Likes (Newbie)]

Hey @OSUblake,

 

Thank you for your reply and your code example which I'll deffinitely take a look at.

 

I'm not even sure calculating the arc is necessary here. Given a start point of 0,0 and a fixed endpoint of the middle of the screen (mx, my) the points should be 0,0 0,my, mx,my?

 

This should always create a control point 0, mx that's perpendicular to start and end causing a perfect arc? If you comment out the third point {x: x3, y:y3} you can see the control point they're using which seems correct... however when adding the last point it seems like the bezier goes all wonky. It's also a little confusing that 0,0 seems to be the start point, but I have to add the halfwidth position for the second point or its off. I'm guessing this is because of the xPercent/yPercent, but 0,0 should be off to then. Math is not my strong suit haha.

 

EDIT:

See the Pen e4a3829bba66e5a90c247b25929787fc by rosefalk (@rosefalk) on CodePen

Tried implementing the path code, but still getting issues.

 

Best,

Eirinn

[OSUblake 18,475 Likes (Superhero)]

53 minutes ago, Eirinn said:

I'm not even sure calculating the arc is necessary here. 

 

You don't have to calculate it. You can certainly approximate it.

 

53 minutes ago, Eirinn said:

Given a start point of 0,0 and a fixed endpoint of the middle of the screen (mx, my) the points should be 0,0 0,my, mx,my?

 

Depends on how you want it to look.

 

53 minutes ago, Eirinn said:

This should always create a control point 0, mx that's perpendicular to start and end causing a perfect arc?

 

I don't know if that will create a perfect arc. When you pass in points like to the motion path plugin, it goes through every point, which is unlike a typical bezier. And it also has a curviness setting.

 

53 minutes ago, Eirinn said:

It's also a little confusing that 0,0 seems to be the start point, but I have to add the halfwidth position for the second point or its off. I'm guessing this is because of the xPercent/yPercent, but 0,0 should be off to then.

 

That's part of the problem. I tried doing some stuff to center everything, but you have some wonky stuff going on, like setting the positioning to fixed and clearing out styles. If you want to clear a particular style, you can use clearProps: "position"

 

See the Pen c788c2df441f452f9c4fb16dbf952f9a by osublake (@osublake) on CodePen

 

 

But I would do this with a FLIP animation. I don't do an arc here. Just showing the technique.

 

See the Pen zMqevJ by osublake (@osublake) on CodePen

 

 

From this thread.

 

 

 

[OSUblake 18,475 Likes (Superhero)]

51 minutes ago, Eirinn said:

It's also a little confusing that 0,0 seems to be the start point

 

It's animating transforms. If an element doesn't have transforms applied, it's sitting at 0,0. But you only have to provide the starting values if you're using type: "bezier".

 

 

[Eirinn 0 Likes (Newbie)]

Edit: it seems that what I'm doing is baseline ok, but it's the switch to position fixed throwing everything off... I'll noodle some more with it.

[Eirinn 0 Likes (Newbie)]

I seem to have made it work by splicing together various things and deferring fixed until the end. It's a bit weird on reverse if the viewport has been scaled or being scaled while animating, but it resets itself on end.

[OSUblake 18,475 Likes (Superhero)]

5 hours ago, Eirinn said:

It's a bit weird on reverse if the viewport has been scaled or being scaled while animating, but it resets itself on end.

 

That won't happen if you do a FLIP animation.