Skip to main content
Participant
September 29, 2014
Answered

How to control only the WIDTH of a rectangle with slider control using expression

  • September 29, 2014
  • 3 replies
  • 9680 views

I have a simple rectangle shape layer that I want to control (only the width) with slider control using expression. How do I do that?

Thanks in advance.

This topic has been closed for replies.
Correct answer Dan Ebberts

You could try something like this for anchor point:

w = content("Rectangle 1").content("Rectangle Path 1").size[0];

[-w/2,value[1]]

Dan

3 replies

Participant
July 6, 2022

Similar question, but how do I control the width and height of a rectangle separately with slider control using expression?

Dan Ebberts
Community Expert
Community Expert
July 7, 2022

A Size experssion like this maybe?

w = effect("Width Control")("Slider");
h = effect("Height Control")("Slider");
[w,h]
Participant
July 7, 2022

Works perfectly! Thank you so much for your help!

Participating Frequently
October 8, 2018

Is there a way to lock HEIGHT position instead of the WIDTH?

I'm still a bit new with expressions, so I don't know how to flip this expression so the rectangle path in the shape layer would be anchored at the top and a slider would adjust the path going down.

Thanks in advance for the assist.

Martin_Ritter
Legend
October 9, 2018

Use Dan's expression for the anchor point and change it to:

w = content("Rectangle 1").content("Rectangle Path 1").size[1];

[value[0],-w/2]

w = content("Rectangle 1").content("Rectangle Path 1").size[...]; -> taking the size of the rectangle and store it in the variable w.

...size[] is an array with two values, x and y. To access on of those values, you write size[0] for x and size[1] for y.

[value[0],-w/2] is an array for x and y values, too. value[0] is the x value of the anchorpoint. This is a way to use an expression along with the possibility to change a value by entering it or drag it.

-w/2 takes half of the y-size of the rectangle and moves the y-value of the anchorpoint by this amount, aka to the top of the rectangle. If you change -w/2 to w/2, the anchor point is pinned at the bottom of the rectangle.

It's easier to understand, if you use actual values:

Rectangle is x = 100, y = 200.

Anchorpoint is at x = 0, y = 0 (in the middle of the rectangle)

Coordinates of the top edge are 0,-100

Coordinates of the bottom edge are 0,100.

(Coordinates of the left edge are -50,0.

Coordinates of the right edge are 50,0.)

w = content("Rectangle 1").content("Rectangle Path 1").size[1];

= 200 (y-value of the rectangle)

-w/2

= -200/2

= -100

Coordinates for the anchorpoint are:

[value[0],-w/2]

= [0, -100]

= top edge.

Cheers,

Martin

Dan Ebberts
Community Expert
Community Expert
September 29, 2014

With a Size expression like this:

w = effect("Slider Control")("Slider");

[w,value[1]]

Dan

holdenkimAuthor
Participant
September 29, 2014

Thanks, Dan for your quick reply.

I tried your expression and it works like a charm.

However, I should have mentioned that I wanted this shape layer to grow and shrink from the left side (with an anchor point at the far left).

I have the anchor point at the far left, but nonetheless with this expression, it grows and shrinks from the middle.

How can I fix that?

Thanks again so much for your help.

Dan Ebberts
Community Expert
Dan EbbertsCommunity ExpertCorrect answer
Community Expert
September 29, 2014

You could try something like this for anchor point:

w = content("Rectangle 1").content("Rectangle Path 1").size[0];

[-w/2,value[1]]

Dan