Sometimes the things you least expect, gain the most attention as the case was with the Polylion I posted on CodePen. I figured the simplicity of the animation effect was easy enough to grok since I wasn’t doing anything super crazy code wise, but I guess the end result was that cool. I’d like to share with all of you how and why this animation went down.

The Polylion Effect

If you don’t follow me on Twitter then let me fill you in. I’m writing an entire series of articles for Tuts+ focusing on TimelineMax by GreenSock. Essentially it flows from beginner to advanced and provides working examples for readers to put to the test themselves. The study with polygon animations also began as practice with a project I did for Jonno Riekwel at Polyon so it was basically a win-win for everyone.

The Polyman

I started my research by examining the Polyman SVG I found on CodePen. Originally it was accomplished with CSS (also explodes on hover \o/), but I wanted to investigate the abilities of finer control with each polygon shape. The result is what you see below using TimelineMax to display the polygons at once. Read the full article on CSS-Tricks

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview: