-
Moving anchor point when rectangle is resized
So im trying to create a tooltip with some controls for a project. I have a rectangle which I have repositioned the anchor point to the bottom of it. So the basic animation would just be two keyframes on the scale property 0 – 100. So obviously it scales from the anchor point… But if that rectangle is resized the animation will not look the same. What I would like to have is that when ever the rectangle is resized the anchor point will always move with it instead of staying in the same position so the animation doesnt get ruined. Essentially I would like the rectangle to resize from the center if possible. I hope im clear enough. Screenshot below. Thanks in advance for any help.
-
11 Replies
-
You got two options at least, I guess:
1-you can play with the scale of your rectangle (in Contents/”your form”/transform) which has its own anchor point that is different from the layer transform menu.
2- You can add a Null layer, place it on the center of your rectangle, parent your rectangle to the Null. Then, scaling the Null will scale your rectangle from its center, without changing neither its anchor point nor your animation.
Julien Schickel
Editor & motion designer
https://www.youtube.com/channel/UC7_NVR3JLdhEYDlEQuNFfug -
Thanks for your replay Julian. I did try both ways and still isnt exactly what Im looking for. The first one the anchor point remains still which as a result the shape goes over it. Screenshot below. With your second solution the rectangle is being resized by the scale instead of the “size”.
Screenshot of Anchor Point position botton Centre
After Scaling
So I would like to go from this
To this (Anchor point needs to move with the size (in this case the height) of the rectangle.
Thanks and sorry about the images I just find it can be easier to explain with visuals.
-
This is more constraining, but I think here is a solution:
Paste these expressions:
On the layer anchorPoint:
R=sourceRectAtTime();
[R.left+R.width/2,R.top+R.height]On the layer position:
value+transform.anchorPointI think it will give you the behaviour you’re looking for.
I made two mini tutorials on this expression here, just in case:
https://www.youtube.com/watch?v=k-VRirjSt4o
https://www.youtube.com/watch?v=MuV-tgJYUcYJulien Schickel
Editor & motion designer
https://www.youtube.com/channel/UC7_NVR3JLdhEYDlEQuNFfugSome contents or functionalities here are not available due to your cookie preferences!This happens because the functionality/content marked as “Google Youtube” uses cookies that you choosed to keep disabled. In order to view this content or use this functionality, please enable cookies: click here to open your cookie preferences.
-
Thanks alot Julien it worked nicely and I could have really used those videos a few months ago so I will be checking out ya channel to see what other good stuff u got on there… Ne ways only other thing Id like to know is… If I want to reposition the anchor point say to a few other positions on the rectangle how would I do that e.g
I used this to get it to the center right side:
R = sourceRectAtTime();
[R.left+R.width,R.top+R.height/2];and this to kind of offset it using a slider (dunno if thats the best way to do it but it works)
R = sourceRectAtTime();
S = thisComp.layer(“Control”).effect(“Slider Control”)(“Slider”);
[R.left+R.width,R.top+R.height/2]+S;I’d like to know how to do it for the center left side and top of the rectangle please and thanks again.
-
For the center left side:
R = sourceRectAtTime();
[R.left,R.top+R.height/2];For the top center:
R = sourceRectAtTime();
[R.left+R.width/2,R.top];Also, more than a slider, you can use a point control, this way, you’ll have separate control of the X and Y offset (with the same expression that you use with the slider)
Thank you for the kind words!
Julien Schickel
Editor & motion designer
https://www.youtube.com/channel/UC7_NVR3JLdhEYDlEQuNFfug -
No problem I’m greatful for your help also. It’s all working now except for when I place the anchor point on the left or right using the codes from above, it will only follow the rectangle’s Width but will remain stable if the Height is changed. I’m guessing it has something to do with the
value+transform.anchorPoint? Anyway to fix it so it follows the height also? -
No, trying it at home, it follows the width and the height. I’m guessing it has something to do with the slider you add, which doesn’t change its value when the height or width changes.
For example, if you’re using the expression above:
R = sourceRectAtTime();
[R.left,R.top+R.height/2];placing the anchorPoint at the left in width and center in height, and you want to offset it to the lower quarter with a point control in height. If height is 1000, your height’s point control will be 250, but if your rectangle height is 100, it should be 25.
So when adding a point control, in these cases, you should add to it the expression:
S=content(1).content(1).size;
[value[0]*S[0]/100,value[1]*S[1]/100]That will in effect change the value of your point control proportionnally to the width & height changes.
Julien Schickel
Editor & motion designer
https://www.youtube.com/channel/UC7_NVR3JLdhEYDlEQuNFfug -
I’m actually looking to use slider controls because I’ve found that point control don’t work well with the Essential Graphics Panel and thats here Im heading with this project. Though I tried it with the point control but I’m getting some weird results. [Im such a beginner with expression so please bare with me]… What I did was I placed a point control on my rectangle layer and pasted the code you gave me onto it. The dimensions of my rectangle is 1480×300 so I ended up with this
S=content(1).content(1).size;
[value[0]*S[0]/1480,value[1]*S[1]/300]then on the anchor point of the rectangle I added
R = sourceRectAtTime();
S = effect(“Point Control”)(“Point”)[0];
L = effect(“Point Control”)(“Point”)[1];
[R.left-S,R.top+R.height/2+L];and on the positon
value+transform.anchorPointJust to illustrate what Im trying to do also…
After height is changed.
The AE (2019) test file if you get some time and dont mind checking it out.
https://f1.creativecow.net/file/13878/13878_tooltipexample.zip -
Is anyone able to help with this please?
-
Hello, and sorry for answering so late, I was under a lot of work…
Trying it, I change a few things in order to make it work:
Create, two Slider controls (one for X & one for Y, which I renamed “offset X” & “offset Y”) and use these expressions:
for the X one:
S=content(1).content(1).size;
value*S[0]/100for the Y one:
S=content(1).content(1).size;
value*S[1]/100On the anchorPoint, paste this one:
R = sourceRectAtTime();
[R.left,R.top+R.height/2]+[effect(“offset X”)(“Curseur”),effect(“offset Y”)(“Curseur”)];And nothing on the position!
That should give the behaviour you’re looking after. The anchorPoint won’t move from the point you choose when changing the size (although some tuning with the values of the two slider controls will be necessary)Julien Schickel
Editor & motion designer
https://www.youtube.com/channel/UC7_NVR3JLdhEYDlEQuNFfug
Reply to this Discussion! Login or Sign Up