Add surface to scrollview (with animation)

Question

Is it possible to add dynamically a surface to already populated scroll view. On click I want all scroll view elements to move animated down and on top to add a new surface again animated.

Is it a scroll view the right way to do it?

Answer 1

Yes, you can add new surfaces dynamically into a populated Scrollview. Simply add a new surface into the Array that you passed to Scrollview#sequenceFrom.

An example based on the scrollview example:

(Edited to add animation)

define(function(require, exports, module) {
  var Engine     = require("famous/core/Engine");
  var Surface    = require("famous/core/Surface");
  var Scrollview = require("famous/views/Scrollview");
  var Timer = require("famous/utilities/Timer");
  var Easing = require("famous/transitions/Easing");

  var RenderNode = require("famous/core/RenderNode");
  var Modifier = require("famous/core/Modifier");
  var Transitionable = require('famous/transitions/Transitionable');

  var mainContext = Engine.createContext();

  var scrollview = new Scrollview();
  var surfaces = [];

  scrollview.sequenceFrom(surfaces);

  for (var i = 0, temp; i < 40; i++) {
    temp = new Surface({
      content: "Surface: " + (i + 1),
      size: [undefined, 200],
      properties: {
        backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
        lineHeight: "200px",
        textAlign: "center"
      }
    });

    temp.pipe(scrollview);
    surfaces.push(temp);
  }

  // Add new surface after 1 second
  Timer.setTimeout(function(){
    var modifier = new Modifier({
      opacity: 0
    });
    var node = new RenderNode(modifier);
    var heightTarget = 200;
    var dynamicSurface = new Surface({
      content: "Dynamic Surface",
      size: [undefined, 0],
      properties: {
        lineHeight: "200px",
        textAlign: "center",
        backgroundColor: "#80e0c0"
      }
    });

    node.add(dynamicSurface);
    dynamicSurface.pipe(scrollview);
    surfaces.unshift(node);

    var opacity = new Transitionable(0);
    var sizeY = new Transitionable(0);

    // Performance implication - both of these functions execute on every tick.
    // They could be deleted after transition is complete if they were non-trivial
    // (allowing prototype function to resume)
    dynamicSurface.getSize = function() {
      var height = sizeY.get();
      return [undefined, height];
    };
    modifier.opacityFrom(function(){
      return opacity.get();
    });

    // Animate the height of the added surface, causing the rest of the list to move down
    sizeY.set(heightTarget, {duration: 500, curve: Easing.outCirc}, function(){
      // Need to set surface size manually after the transition, otherwise the div height is 0
      // (even though space was made for it)
      dynamicSurface.setSize([undefined, heightTarget]);
      // Fade in the item's content
      opacity.set(1, {duration: 500});
    });

  }, 1000);

  mainContext.add(scrollview);
});

This method is based on the approach I found in the Taasky Famo.us demo:

• https://famo.us/demos/
• https://launch-demos.famo.us/Taasky/

It translates items off of the screen and then animates down their height to 0 to simulate closing the gap. The example above animates the height from 0 to 200 to simulate making the gap before insertion.

Answer 2

Take a look at Ijzerenhein's Famous Flex, it has all you need (including great tutorials and documentation): https://github.com/IjzerenHein/famous-flex