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.
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.
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