Add the ability to animate height and width

[tjvantoll]

I would like the ability to animate a UI element’s height and width. Here’s my use case: I have a container that I need to grow after a user interaction. If I use a scale animation on the container, everything in the container (text fields, buttons, labels, etc) scales as well, which I don’t want. I just want the container to grow and everything in the container to keep the same dimensions.

Now I can workaround this by absolutely positioning an element behind my content and scaling that element instead, but that code bloats my XML file, and, it’s really hard to get all the dimensions and positioning of these elements to line up perfectly across devices and screen sizes.

I realize this is not an easy thing to implement, as I’m sure there are layout considerations, but I thought I’d log this limitation to see if others in the community are hitting this problem as well.

[NathanWalker]

I ran into this last week and would love to see this as well. Aside from my emoticon reaction above, nothing like words of affection 👍

[vjoao]

I've been looking into this for quite a long time. Much appreciated.

[JoshDSommer]

👍

[patuku-roy]

+1

[mikkeldamm]

👍

[honrust]

+1, yes please, sounds pretty essential for animating list item expanding/collapsing.

[codeback]

👍

[NickArgyle]

You can sort of hack this together using the timer and a loop. You won't get curve based animation, but it works in a pinch.

Basically, set the width property of the view you want to scale to an observable, and procedurally increase/decrease it.

Something like this:

function sideBarIn() {
    console.log("starting loop");
    sideOpen = 1;
    pageData.set("hamburgerVis", "collapsed");

    function nextFrame() {
        if (x < 25) {
            x = x + 5;
            xString = x.toString() + "%";
            console.log(xString);
            pageData.set("sideWidth", xString);
            setTimeout(nextFrame, 1);
        }
    }
    // Start the loop
    setTimeout(nextFrame, 0);}

function sideBarOut() {
    sideOpen = 0;
    console.log("starting loop");

    function nextFrame() {
        if (x > 0) {
            x = x - 5;
            if (x == 0) {
                xString = x.toString();
                console.log(xString);
                pageData.set("sideWidth", xString);
            } else {
                xString = x.toString() + "%";
                console.log(xString);
                pageData.set("sideWidth", xString);
            }
            setTimeout(nextFrame, 1);
        }
    }
    // Start the loop
    setTimeout(nextFrame, 0);
}

Surprisingly smooth on an actual iPad, not so much in the GIF.

[roblav96]

@NickArgyle you = winning.

[3rror404]

+1 for a built in solution using Animate. I know this is old but I've hit this wall a couple of times now.

[ezequielzacca]

Please implement this, would be very usefull to make expanding and collapsing components

[dapperapps]

+1

[vjoao]

Is this that difficult to implement? It's been a year already with no feedback from the core team.
ping @Pip3r4o @hamorphis @hshristov @hdeshev

I know you are focusing on the 3.0 release with lots of stuff to do, but could you point some directions to make this happen? We could contribute with a PR.

Thanks in advance.

[danielgek]

@vjoao you can check Alex course on animations while this isn't done