I am trying to animate a group of buttons from a relative position to a fixed position on each scroll by.

**HTML**

```
<div class="menu">
    <button class="button"></button>
    <button class="button"></button>
</div>

```

**CSS**

```
.button {
    display: inline-block;
    position: relative;
    margin: 3px;
    height: 56px;
    width: 56px;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.grouped {
    z-index: 1000;
    position: fixed;
    top: 31px;
    right: 20px;
}

```

**JS**

```
var scrollFlag = false;

$(window).scroll(function() {
    var menu = $(".menu"),
        scrollTop = window.scrollTop;

    if(menu.offset().top <= (scrollTop + 50)) {
        if(scrollFlag == false) {
            $(".menu button").each(function() {
                var button = $(this);

                button.addClass("grouped");
            });

            scrollFlag = true;
        }
    } else {
        $("#intro div.menu button").each(function() {
            $(this).removeClass("grouped");
        });

        scrollFlag = false;
    }
});

```

As it is now the buttons just jump to the fixed position. I realise this is because they do not have set top/right values for the animation to begin from.

I tried to overcome this by getting the buttons offsets and setting them as the top and left values but this didn't seem to work either.

Any ideas?