How can I resize shapes without resizing from the center?

I am trying to animate a specific stacked progress bar animation and I'm unable resize rectangles without resizing from the center, which will mess up the animation. Additionally, if I use a transform node to pivot the resizing, the rounded corners of my rectangle don't scale as intended. I have linked a small image sequence (I wasnt allowed to post videos) of what I'm trying to animate and showcasing the problem, because I find it difficult to describe with text:




The video can be found on my reddit thread of the same issue.

Does anyone know how I can stretch the shape as intended or have any other ideas of how I can go about doing this animation?

Change the center values in Rectangle node properties, it moves the sizing center.

The video can be found on my reddit thread of the same issue.

Maybe it can, post the link here too.

My first suggestion would be to do this with three seperate shapes: two circles for the ends of the shape and then a rectangular polygon mask instead of a rectangle mask. Connect the x-position of the right hand points to the x-position of the right circle so that if you move the right circle, the polygon will grow with it to fill the bar.

Otherwise you will need to make the rectangle mask center and its size react to each other, because there is no way (currently) to scale from another position than the center. Or make a negative mask for the left side of the slider and then put the center of the rectangle on the center of the left circle and just grow it from there and cut out the left part.

Or you can make some sort of calculation where the center of the rectangle moves depending on the width of the shape. This sometimes looks a bit glitchy when making it interactive, but it should be doable.
Maybe even add a seperate new width slider that influences both the position and the width of the rectangle mask.

Those are the first three options from the top of my head.

A 4th alternative is to use the new shape system, since it has x/y off-sets by default which are easier to manipulate with expressions. Just copy/paste the following in your comp and you should be good to go.

Code: Select all

{
   Tools = ordered() {
      sRectangle1 = sRectangle {
         CtrlWZoom = false,
         Inputs = {
            ["Translate.X"] = Input {
               Value = -0.1445,
               Expression = "(0.5*Width)-0.5",
            },
            Width = Input { Value = 0.711, },
            Height = Input { Value = 0.1, },
            CornerRadius = Input { Value = 1, },
         },
         ViewInfo = OperatorInfo { Pos = { 275, 16.5 } },
      }
   },
   ActiveTool = "sRectangle1"
}

Slightly different code, but it works with a rectangle mask as well. And not as glitchy as it used to be.

Code: Select all

{
   Tools = ordered() {
      Rectangle1 = RectangleMask {
         CtrlWZoom = false,
         Inputs = {
            Filter = Input { Value = FuID { "Fast Gaussian" }, },
            MaskWidth = Input { Value = 1920, },
            MaskHeight = Input { Value = 1080, },
            PixelAspect = Input { Value = { 1, 1 }, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Center = Input { Expression = "Point((0.5*Width),0.5 )", },
            Width = Input { Value = 1, },
            Height = Input { Value = 0.1, },
            CornerRadius = Input { Value = 1, },
         },
         ViewInfo = OperatorInfo { Pos = { 440, 16.5 } },
      }
   },
   ActiveTool = "Rectangle1"
}

Change the center values in Rectangle node properties, it moves the sizing center.

Pardon me for brain fart, this obviously doesn't work.

While taking a break from the computer I actually thought of the first solution (2 circles and one rectangle) but imagined it would be difficult to keyframe. But wow! I didn't expect this amount of help from you! The 4th solution was super easy to use and pretty much works perfectly for what I need. And the best thing is its shortcomings were able to be dealt with within the fusion page. I have been playing around with it in fusion for 30+ minutes creating different kinds of cool looking progress bars and the best thing is that it works just like a regular old fusion mask. I can't express my gratitude enough towards to you. Davinci Resolve is a really cool tool!

Change the center values in Rectangle node properties, it moves the sizing center.

Pardon me for brain fart, this obviously doesn't work.

Why wouldn't it work? You translate the center by half the change in width/height.

Yes, through expression it can. But not directly, as it controls other aspect, thus the brain fart.

Why don't you use just thick lines with round endcaps? Just animate the 2nd point of each line.

Why don't you use just thick lines with round endcaps? Just animate the 2nd point of each line.

That's a really smart suggestion! It just goes to show there are so many ways to do stuff in Fusion.

Change the center values in Rectangle node properties, it moves the sizing center.

Pardon me for brain fart, this obviously doesn't work.

Why wouldn't it work? You translate the center by half the change in width/height.

It's what I'm looking for for the howl today. No, it doesn't.It was also what I thought: just move the pivot. NO .. if I move the pivot on X axis the rectangle moves diagonally. Not clue what a heck I have to do

I thought "let's see if there's a crop" .. the "crop" node there is but it doesn't work as I supposed ...

@lalovoe do in this way for the rectangle:

1. Background white.
2. As mask (blue input of the background): a rectangle with the size you need, as max extension on X-axis. Y-Axis = the diameter of the left circle.
3. Apply the TRANSFORM node to it
4. Set the PIVOT of the TRANSFORM NODE to the left Edge of the resulting rectangle
5. Then key frame the X Size of the Transform Node.