Heal Live Thrive Coaching – Exploring SVG Animation!

Heal Live Thrive Coaching A screenshot of Heal Live Thrive Coaching, http://heallivethrivecoaching.com

One of the biggest trends in web nowadays is the combination of CSS animation and SVG graphics to create interesting UI transitions and animated elements. SVGs are great because they are lightweight and you can scale them to any size and they will always looks clean and crisp. As it is comprised of XML markup, the other great thing about SVGs is that you can select it’s elements and animated them.

One request for the Heal Live Thrive Coaching website was an animated Call-to-Action of their logo. This was a perfect opportunity to use these techniques.

SVG Markup example
SVG Markup example

See how it looks quite similar to, even down to adding classes? Very cool!

Head on over to http://heallivethrivecoaching.com and see if you can find the animated SVG bird.