Animated collapsible window with drop-down button works, but im having some issues.

Got two menus

Problem is, one of them doesn’t want to work properly, and the other one only works in its current location.

Its a scalable scroll window, the viewpoint scales with its holder,

within the viewport, in the content section, there’s an empty game object ‘Sizer’ with the rect dimensions that it’s supposed to grow to.

The script grabs the ‘Sizer’ object, the button to start the action, its own size, and sets it up to make it all happen.

Here’s the script in question.

`
public class DropDownBehavior : MonoBehaviour
{
    RectTransform MySize;
    RectTransform ObjSize;
public bool IsOpen = false; //starts closed
float IniWidth;//Initial Width and Height values
float IniHeight;

float GoToWidth; //Width and Hight the Update loop checks for a change
float GoToHeight;

float TargetWid; //The 'Sizer' width and height, grabbed by ObjSize
float TargetHei;

float currentW; //The current (static) size of the object, Used by lerp to ensure a smooth transition.
float currentH;

void Start()
{
    MySize = this.transform.GetComponent<RectTransform>(); //This object's rect

    IniWidth = MySize.rect.width; //Setting initial values
    IniHeight = MySize.rect.height;
    GoToWidth = MySize.rect.width; //Update checks this, so this must be the starting value.
    GoToHeight = MySize.rect.height;

    this.transform.Find("Viewport").Find("DropDown").GetComponent<Button>().onClick.AddListener(Goto);
    //When this button is clicked, the parent will change to a given size, given the size of its 'Sizer' object.

    ObjSize = this.transform.Find("Viewport").Find("Content").Find("Sizer").GetComponent<RectTransform>();

    //In every collapsible object, there is a bounding box object that encompasses all of the objects within, 'Sizer'
    //'Sizer' should be roughly the size of the end-state of the collapsible object.
    //Target values are where it should end up, so we grab the ObjSize (the size of 'Sizer') and put it in the Target values.
    TargetHei = ObjSize.rect.height + 10;
    TargetWid = ObjSize.rect.width;

}

static float t = 0.0f; //The lerp uses this along with delta time

void Update()
{
    if(MySize.rect.width != GoToWidth)
    {
        t += 0.89f * Time.deltaTime; 
        /*
         * every loop, t becomes greater * deltaTime, 
         * the lerp below, then multiplies it to the power of 2 to give a x^2 curve, 
         * making it speed up around the center of the animation.
         * 
         */
        if (MySize.rect.width != GoToWidth)
        {
            this.GetComponent<RectTransform>().SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, Mathf.Lerp(currentW, GoToWidth, Mathf.Pow(t,2)));
        }
        if (MySize.rect.height != GoToHeight)
        {
            this.GetComponent<RectTransform>().SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, Mathf.Lerp(currentH, GoToHeight, Mathf.Pow(t, 2)));
        }
    }
}

private void Goto()
{
    t = 0f;

    if (IsOpen == false)//TURN ON || OPEN
    {
        IsOpen = true; //set to true, is now open.
        
        //The current is set to Initial values, its 'closed' values
        currentH = IniHeight;
        currentW = IniWidth;

        //The 'GoTo' values are set to the target values, its 'open' values
        GoToHeight = TargetHei;
        GoToWidth = TargetWid;
    }
    else
    {
        IsOpen = false; //TURN OFF || CLOSE

        //The current is set to Target values, its 'open' values
        currentH = TargetHei;
        currentW = TargetWid;

        //The 'GoTo' values are set to its Initial State values, its 'closed' values
        GoToHeight = IniHeight;
        GoToWidth = IniWidth;
    }

    //Update catches these changes, and runs accordingly.
}

}

`

Sorry for the formatting issue, i have absolutely no idea why that’s happening :confused:

This is a small little graph of how i want it to look-

What happens is, when the button of the potato window is clicked, instead of dropping down, it opens up and down. The Wait window works as intended, but it opens up the same way no matter where you put it- It never opens upward or to the right, always down and do the left.

I assumed this was because of its anchor, but that doesn’t seem to be the issue either

No matter where its anchored, whether its being set to stretch or not, it does the same exact action.

I’ve tried using localScale, it scrunches the window- so not really what im looking for.

I’ve tried fooling around with some of the properties and methods of rectTransform, but i’m sort of at a loss.

I know i should probably try using the animation panel, but it’s just going to make life easier if i can get this to work properly.

One thing im going to try while im waiting for answers is the reverse of what im doing now- Start with it open, Snap closed, and ‘return’ to its original position.

If that works, ill just update this for any future onlookers. **It did not c:

Thanks for any help!

Well for anyone looking at this later on, it was the Pivot in rectTransform.