24 Jul Using ContainerSurface to create a Ken Burns animation effect
ContainerSurface & clipping
In famo.us, surfaces are typically added to a flat DOM using absolute positioning. This is what gives famo.us its awesome performance and makes almost anything possible. A consequence of this is that all surfaces are treated equal and the z-position is important for the order of rendering. If you want to clip surfaces, then you can use a ContainerSurface. A ContainerSurface effectively creates a div inside div. And when you also set the property overflow to hidden, then the contents is automatically clipped.
The Ken Burns animation effect is a popular animation effect for giving photo’s a movie-like feel. It uses simultaneous panning and zooming to create a sense of depth and livelihood. I created a component called the KenBurnsContainer to apply this effect to renderables. It can be used with images but really works with any renderable. Internally it uses a StateModifier to zoom (change the scale) and to pan (change origin/align).
The code is also available as a component on github: IjzerenHein/famous-kenburnscontainer