Skip to content
This repository has been archived by the owner on Mar 30, 2023. It is now read-only.

Animating object inside a group results in shifted position for the child object. #27

Closed
ghost opened this issue May 23, 2017 · 7 comments

Comments

@ghost
Copy link

ghost commented May 23, 2017

Animating an object within a group results in that object X and Y position shifted by the sum of respectivelly X and Y position of the group + X and Y position of the object itself.

I've attached a screenshot, the left artboard is how it was set in the keyframe, X and Y position at the top left corner. The right artboard is how it gets exported.

If not clear I can elaborate a bit more, but I'm not sure if Sketchapp X and Y behaviour has changed within groups but it appears the reference point is not the group itself but rther the top left corner of the canvas even inside a group.

screen shot 2017-05-23 at 09 26 18

@ghost
Copy link
Author

ghost commented May 23, 2017

I suggest to change line 228 and 229 in file library > Animation.js from

returnObj.x = Math.round((layer.frame().x() + parentGroupValues.x) * 100) / 100;
returnObj.y = Math.round((layer.frame().y() + parentGroupValues.y) * 100) / 100;

to

returnObj.x = Math.round((layer.frame().x()) * 100) / 100;
returnObj.y = Math.round((layer.frame().y()) * 100) / 100;

This solved the problem for the few tests I've done.

Test sketch file I'm using:
anim.sketch.zip

@niittymaa
Copy link
Collaborator

Thanks ghost.

I'm not sure where's the problem, because if I use "Return Keyframe" after export it'll put back child to the original place. So only exporting make it to jump wrong place for me. And after all it seems that exported images is correct and stays on parent group top left corner.

I tested out those changes that you suggest but it seems that there is no affect with this problem for me. Strange if it works for you.

I just got newest 44.1 sketch licence today, so I have tested plugin only with this problem atm. Please, inform if you find more about this issue. Great to see that you try to figure out the problem!

@nakele
Copy link

nakele commented May 24, 2017

Hey niittymaa

Thanks for getting in touch :)

Have a look at this video, I'm animating the square inside the group, keep an eye out for the position of the square in comparison to the rectangle. When I export to GIF the position of the square is incorrect:
bug.mov.zip

Try to animate the square from left to right using this file: exporting it will result in the square widely in the wrong place:
test_animate.sketch.zip

I'm also using v44.1

The issue appears only on the exported output, not while working :)

@niittymaa
Copy link
Collaborator

@nakele I got your point. Thanks for good explain!

Actually that's not bug. That's the problem with groups atm. There is couple workarounds if you use groups. Here is 2 videos where other I create animation to parent group BEFORE I animate child. And the other workaround is to create "bounds" layer to prevent wrong calculation.

I know it's not the best way to work with groups but...

WorkaroundVideosForGroups.zip

@niittymaa
Copy link
Collaborator

Actually you @ghost were right. Changing those lines will make it to prevent it jumping wrong position when exporting, even exported gif looks ok. I found that while testing @nakele example. Need to test more if it works. Thanks to both of you!

niittymaa added a commit that referenced this issue May 24, 2017
Updated based on this bug report #27
@nakele
Copy link

nakele commented May 25, 2017

ghost was another account I had which I deleted, no point in having 2 account, im the same person :)

@niittymaa
Copy link
Collaborator

Ah, thanks for letting us to know ;)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants