Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at Leaff.it/ I really love famo.us framework and its amazing potential and if you're like me, and you want the web to win, please share some snippet of code for the community and grow faster with us
Categories
Meta
Famo.us Code | Using ContainerSurface to create a Ken Burns animation effect
636
post-template-default,single,single-post,postid-636,single-format-standard,ajax_updown_fade,page_not_loaded,,qode-theme-ver-6.2.1

Using ContainerSurface to create a Ken Burns animation effect

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.

var containerSurface = new ContainerSurface({
    properties: {
        overflow: 'hidden'
    }
});

Ken Burns

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