Is there a way to animate the size of the header in the HeaderFooterLayout?

Question

Is it possible to animate the size of the header in a HeaderFooterLayout? I am trying to change it's size with an animation but I am not seeing any API for this. So I was wondering about a technique for doing it.

I suppose I can use a sequence layout and animate the surfaces? — Subtubes, Dec 17 '14 at 08:25

score 1 · Answer 1 · edited May 23 '17 at 12:12

You can achieve this by using a Transitionable. This is done by the following:

Create a transition for the animation:

var transition = {
    duration: 400,
    curve: Easing.inOutQuad
};

Set the start & end pixel counts:

var start = open ? 200 : 100;
var end = open ? 100 : 200;

Instantiate your new Transitionable with the starting pixel count:
```
var transitionable = new Transitionable(start);
```

Create the function that will be executed to apply the pixel count:

var prerender = function () {
    layout.setOptions({
        headerSize: transitionable.get()
    })
};

Attache the function to the Engine event:
```
Engine.on('prerender', prerender);
```
Add transition to end state to the queue of pending transitions:
```
transitionable.set(end, transition, complete);
```

Here is a working fiddle for you to reference: http://jsfiddle.net/Mabuti/4or8nxh4/ In full disclosure I did use the following post as a point of reference: famo.us: can I animate the header/footer heights of a header footer layout? but I tried to add some context to the process.

You could also review the Transitionable documentation to see better understand what it is doing: https://famo.us/docs/transitions/Transitionable

I was unfamiliar with the prerender functionality. I'll give this a shot later today and mark the answer — Subtubes, Dec 19 '14 at 15:59

score 0 · Answer 2 · answered Jan 04 '15 at 19:07

An alternative could be to use the famous-flex LayoutController and HeaderFooterLayout. The code is pretty straightforward:

var LayoutController = require('famous-flex/LayoutController');
var HeaderFooterLayout = require('famous-flex/layouts/HeaderFooterLayout');

// Create header/content surface/views
var header = new Surface(..);
var content = new Surface(..);

// Create header-footer layout
var layout = new LayoutController({
    layout: HeaderFooterLayout,
    layoutOptions: {
        headerSize: 40
    },
    flow: true,             // this causes a smooth transition when changing the header-size
    reflowOnResize: false,  // do not reflow on resize
    dataSource: {
        header: header,
        content: content
    }
});

...

// Change the height of the header (because flow is enabled,
// this will automatically cause it to smoothly animate from
// the old height to the new height)
layout.setLayoutOptions({
    headerSize: 100
});

Library: https://github.com/IjzerenHein/famous-flex

Is there a way to animate the size of the header in the HeaderFooterLayout?

2 Answers2