Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TXT does not move with parent Line when tweening #1020

Open
timonkrebs opened this issue Apr 1, 2024 · 5 comments
Open

TXT does not move with parent Line when tweening #1020

timonkrebs opened this issue Apr 1, 2024 · 5 comments
Assignees
Labels
b-bug Something isn't working

Comments

@timonkrebs
Copy link

timonkrebs commented Apr 1, 2024

Describe the bug
When i have a child node I expect it to always move with the parent. This is the case for Txt in Circles etc. but seems to be a bug with Line as a parent.

To Reproduce
(https://stackblitz.com/edit/stackblitz-starters-xumqnr?file=my-animation%2Fsrc%2Fscenes%2Fexample.tsx)

"test2" is a child node of the second appearing line. It but does not inherit the position of the parent.

Expected behavior
When i have a child node I expect it to always move with the parent.

Package versions:

  • "@motion-canvas/core": "^3.15.1"
  • "@motion-canvas/2d": "^3.15.1",
@timonkrebs timonkrebs added the b-bug Something isn't working label Apr 1, 2024
@aarthificial
Copy link
Contributor

Your example works correctly, test2 would move together with its parent if you were to change the parent's position.
I think you assume that the line's position is somehow calculated based on its points but that is not true. You're not changing the position property so the origin of the line stays in the same place.

If you want to position something at the center of the line you can use getPointAtPercentage to calculate what that position would actually be:

view.add(
  <Line
    // ...
  >
    <Txt
      // ...
      position={() => line2ref().getPointAtPercentage(0.5).position}
    >
      test2
    </Txt>
  </Line>
);

@timonkrebs
Copy link
Author

Thank you. That would be nice if it was documented. I think I make a PR for the docs. Is there a reason why the origin schould not be moved? I think it would be convenient and the usage more intuitive and less verbose if the origin would be moved.

@aarthificial
Copy link
Contributor

There's currently no way to move the origin. Child nodes are always positioned relative to the parent's transform.

@timonkrebs
Copy link
Author

timonkrebs commented Apr 4, 2024

I meant that it would be intuitive if points={[rect().right, circle2.left]} also changed the origin of the Line itself which would also move the children.

Why should the origin not move if the points moved. I think moving the origin to getPointAtPercentage(0.5).position would be reasonable when the points change. Or what is the reason not to do it?

@aarthificial
Copy link
Contributor

aarthificial commented Apr 5, 2024

Again, given the current implementation, there's no way to move the origin of the node used by the children without modifying the position of the node itself. And you cannot modify the position of the Line based on the points because points are positioned relative to that position. You could make the points be defined relative to the position of the Line's parent but then you'd lose the ability to move all points at once or rotate them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
b-bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants