Moving twice with getAlignMatrix not working fine (?)

[guiferviz]

Hi, I have found a situation where the getAlignMatrix function behaves in an unexpected way for me. In the example, the red rectangle should move to the centre and then to the top of the screen and remain half visible.

move(0.5, 0.5, 0.5, 0.5) // Move to center. Works OK.
move(0.5, 0.5, 0.5, 0) // Move to top and remain half visible. Works OK.
move(0.5, 0.5, 0.5, 0) // It should be in the same position, but it moves out of the scene :(

So far I've discovered that, if I change the id="to" from the svg tag to the black-stroked rect it works perfect! In my application I have multiple svg's nested, so it's not always going to be possible to do that...

 

PS: Thank you for this library. I've been using it for a few weeks now and I love it!

See the Pen gOweypL by guiferviz (@guiferviz) on CodePen

[ZachSaucier]

Hey guiferviz. You need to keep in mind that getAlignMatrix gets the values when called. So there's a couple of things that you need to do:

1. Use only one getPosition call per tween. Right now you do it twice: once for x and once for y. Instead you should do it before your tween and then use those values. If you make this change in your demo you can see that it then causes the x and the y to be off from what you're wanting the second time the same parameters are given:
   

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

2. Then you just need to remove the relative += offset. I'm not sure why you had it:
   

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

3 hours ago, guiferviz said:

Thank you for this library. I've been using it for a few weeks now and I love it!

We're so glad to hear it! We hope you continue using the tools and perhaps consider joining Club GreenSock someday to get access to all of the incredibly helpful tools offered in it  

[guiferviz]

Hello Zach, thanks for your response!

1. I know it may seem strange without context, but I want the value to be calculated dynamically because I don't know the position of the reference object (the 'to' object).

2. I took the '+=' from the example in the docs: https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.getAlignMatrix()

 

Anyways, in your latest example, if you only change the x="0" of the red rectangle to x="-50" you are not going to get the correct result:

See the Pen GRjdRwp by guiferviz (@guiferviz) on CodePen

[GreenSock]

From what I can tell, it's working exactly as it should but I think the confusion is being caused by the fact that you're placing your elements in a way that expands the bounding box of the "to" element (container). So the "center" isn't what you think it is

 

So if your #to <svg> element is 500x500, normally its bounding box would place its center at 250,250. However, if you put a child element at -100 on the y axis, now the bounding box shifts and the <svg> is 500x600, and its center is actually 50px higher. So your negative offsets are throwing things off. 

 

A simple solution is to just use a different element like your <rect> that has the black outline defining the boundaries as the "to" element since it has an identical coordinate system as your <svg> but its bounding box isn't affected by the other elements you're shifting around, like this: 

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

 

By the way, there's no need to use function-based values in that tween. It doesn't hurt anything, but it doesn't help. It just makes the code more verbose. You could pass in the x/y values directly. 

 

Happy tweening!

[guiferviz]

Thanks @GreenSock!!

That makes perfect sense! For some reason I thought it would use the x, y, width and height properties to do the calculation...

Thank you for your quick answers, greetings and happy new year!

[guiferviz]

It's me again I'm not sure if opening another thread is the right thing to do, but I post another CodePen here.

See the Pen yLaEbzd by guiferviz (@guiferviz) on CodePen

 

This time seems that the attribute preserveAspectRatio='xMidYMid meet' is not been taken into account. The green rectangle represent the real size of the nested SVG element (the size specified in width and height attributes). As we cannot resize the red box preserving the aspect ratio, it is centred in the middle. I tell the gray box to move just down the red box and it moves to another position. That position is the good one if we use preserveAspectRatio='xMinYMin meet' but it's not the case in the given example.

 

Have you come across this before? Do you know any solutions?

Thanks!!

[guiferviz]

I think I got the right solution. Just need to change:

return m.apply({
    x: 0,
    y: 0,
});

By:

return m.apply({
    x: to.getBBox().x,
    y: to.getBBox().y,
});