how do we animate folding of a surface in famo.us?

Question

I have a surface. I need to animate it to fold (origin) making two halves of surface to one.

originMod = new Modifier({
        origin: [0.5, 0.5]
    });

originMod.setTransform(Transform.rotateY(-2), {
    duration: 500,
    curve: 'easeOut'
});

this turns the whole surface. i just want the right half of the surface to turn and lay back left half of the surface

score 0 · Answer 1 · answered Sep 17 '14 at 06:17

Looks like you are building something like a book flip animation. I saw your other Question as well. You cannot possibly fold a single surface from its middle. You can create a View with two surfaces and add functions in the View to flip only the right surface as you are doing now.

But you should first Take a look at using the concept of Views and constructors. A good start will be the SlideShow tutorial they already have in place.

http://famo.us/university/lessons/#/famous-101/slideshow/1

In your case you probably will have to pass your ajax URL to a slide view and process it in Constructor to load data on demand. The SlideShow view will correspond to a book View and a SlideView will correspond to a open page with left and right as two surfaces in the View. You need references to left and right surfaces' modifiers, which you can use to carryout the animations.

how do we animate folding of a surface in famo.us?

1 Answers1