My face with a Photoshop cutout filter applied to it

KATRINEMARIE.ME

Welcome. Click on an image below to read about the given project.

Back to homepage

Greensock Zipper

11. March 2016

See the Pen Greensock zipper animation by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.

This is the result of me playing around with GSAP's cycle plugin.

I saw a really neat zipper example of the cycle plugin in a YouTube video tutorial, but it had the one drawback that a zipper doesn't open and close the same way - it alternates. So I decided to correct the flaw, and made my own version.

Cycle makes everything so much easier. It makes it possible to cut your animation code down to at least half (and probably a lot more than that) the size. Not to mention the time it saves you.

Another thing worth noting about this demo is the fact that the heights are set with viewport units - in short, it is fully responsive. The size of each bar will adjust according to the size of the viewport which means that you'll get different results on different screens - which I personally find interesting to work with (although I sometimes get the feeling that other devs think otherwise).

Back to homepage