Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at I really love 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
Meta Code | Animations


Charts for easy choosing your easing functions

A simple Pen for helping to choose your easing function (also known as curves) when creating animations with defined begin and end state. See the Pen easing functions by Pierre-Eric Marchandet (@PEM--) on CodePen. See the Pen easing functions by Pierre-Eric Marchandet (@PEM--) on CodePen. Original...

Cube Globe (Clobe)

A cube component with open street map data on it. [wp-js-fiddle url="" style="width:100%;height:400px;border:solid #4173A0 1px;"]...

Using ContainerSurface to create a Ken Burns animation effect

ContainerSurface & clipping In, surfaces are typically added to a flat DOM using absolute positioning. This is what gives 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...

Animated Dots Icon

So, there I was, having a casual call with a friend of mine a few days ago. We used Skype to share some files, when I noticed that program has a circular processing/loading icon, which consists of a chain of small dots, running one after another....

Material design’ish button animation

I recently did a proof of concept for a material design like button animation. The animation consists of 3 surfaces, which are animated using StateModifier's. The size, position and rotation are modified to get the resulting effect. [wp-js-fiddle url="" style="width:100%;height:400px;border:solid #4173A0 1px;"] The original code can be found...

Using Google-maps with

Google-maps can be integrated using the famous-map component (also supports LeafletJS / OpenStreetMap). In this example, a MapView is created and renderables are linked to the map using MapModifiers. The photo's are animated in sequence to create a cool looking effect. After all the animations are done, the...