SMIL(E)

Inspired by CSS3 Animations in real life.

Working with web tech is mostly using a tool to get something done, animations are something that isn’t that simple to deal with but there are tools out there that can make your life simpler.

We can use CSS, DOM, sprites and? Obviously something no-one heard of, SVG animations in the browser!

Obviously we have an acronym SMIL, pronounced as smile, which is Synchronized Multimedia Integration Language.

Basically we can add a nested <animate> svg element within the one we want to animate, like this.

<myElement>
    <animate />
</myElement>

set what we want to animate

<myElement center="0">
    <animate 
        attributeName="center"
        from="0"
        to="100"
        dur="5s"
        repeatCount="indefinite"/>
</myElement>

and now the center attribute will go from the value 0 to 100 in 5 seconds and cycle indefinitely.

Wow that was easy, time to level up

<myElement transform="rotation">
    <animateTransform
    type="rotate"
    from="0"
    to="360"
    dur="5s"
    repeatCount="indefinite"/>
</myElement>

this is a little tricky, we did not se the center of rotation so it is assumed to be (0,0) the top left corner, lets fix this.

<myElement transform="rotation" width="1024" height="1024">
    <animateTransform
    type="rotate"
    from="0 512 512"
    to="360 512 512"
    dur="5s"
    repeatCount="indefinite"/>
</myElement>

now the center of rotation is (512,512), the center of myElement.

And this is the effect we can get with SMIL, the example is forked from Edoardo Odorico’s one.

What is missing is the CSS animation and we could pack the three files into one.

These are the images with animation included