Animated Polygon Art

Recently, I began writing my series for Tuts+ discussing in-depth how to use and understand TimelineMax by GreenSock. The results of my studies and research has thrusted me from a CSS animation lover to someone that appreciates the fine control achieved with the GreenSock Animation Platform (GSAP). Let’s examine the benefits of this control using a couple of amazing pieces of artwork presented as SVG.

Move. Them. Polygons!

The lion’s head is composed of one single SVG element. Inside the SVG are the related polygon shapes that create the entire head of the lion. Think of each polygon shape as a single DOM node. In order to animate each polygon shape that composes the lion’s head with CSS we’d have to summon the powers of the Sith lord when it comes to counting the presence of each polygon shape and controlling individual tweens along with their associated timing position (where the magic really happens).

See the Pen SVG PolyLion: Polygons Animated w/GSAP by Dennis Gaebel (@grayghostvisuals) on CodePen.1395

Figure 1: Animated SVG PolyLion

As you can see with the result above, the degree of control is astounding! Not only can I control each polygon shape individually to stagger their movement, I can also offset their trigger time or make the polygon shapes react in a single moment like the case is with this next example:

See the Pen Animated Ess Vee Gee Geo Man by Dennis Gaebel (@grayghostvisuals) on CodePen.1395

Figure 2: SVG PolyMan

Why Care?

The reason I show you all this is to make a case for GSAP. Yes, CSS is great and I’m not one to turn my back on it, but there are times when you can’t do everything with CSS that you see in your mind’s eye. It’s also a showcase for the power and strength that GSAP gives authors…plus you have to admit it’s a pretty cool effect. The most important points to keep in mind are the level of control we have over each individual polygon shape in regards to timing, position, easing and even tweening! That last point alone should be impressive enough for you to get started right this minute!

The Sky’s The Limit

As you can see with the previous animation examples, I’m generally moving the polygons in and out in a pulsating motion. Think about things like CSS perspective for a moment and the capabilities with 3D? What if each polygon shape folded? What if we started doing some weird skewing action or even blowing them up like the case is with the next demo (also used as a basis for the PolyMan above).

See the Pen Smash! by Shak Dizzle (@shak_dizzle) on CodePen.1395

Figure 3: Exploding SVG PolyMan: hover to activate


Web Development & Design, Technical Writing, Interaction Design, Open Source Maker & Contributor. Helping Create A Better Web.
  1. This is an excellent post but I’m curious…how do you render the lion? What tool did you use to export 3D as SVG?

    It’s cool you can animate the parts of the image, but in theory would it be possible to turn a 3D SVG model around by rendering the various frames? Like scrubbing series of JPGs I guess…

    1. Thanks Brandon. Since I’m not the original creator of the lion you would have to ask the person that originally posted the lion SVG on CodePen. Refer to my lion pen for info regarding credits and such.

      I’m not sure what you’re asking in your question, but with GSAP you can scrub each part of the timeline sequence frame for frame and control each tween and their point of execution otherwise known as position timing.

    1. Glad I could help and thanks for posting the SVG man!

  2. This is awesome! I love it.

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: