Skip to main content

The Challenge #1: The Winner

By Alex Walker

Design & UX

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

A winner celebrates

Photo: Ninja M.

It’s been a little over a week since I set the first challenge — to recreate this animated GIF in code — so it’s time to look at the results.

Remember, there were no real rules and scientifically-measurable correct answer to the problem — it comes down to balance of code and magic. We certainly got a bunch of fantastic solutions, so I’m going to show you the best handful.

The Short-list

Scott Kellum (blog) – border-radius/border-width

See the Pen The Challenge: Recreate this GIF in Code by Scott Kellum (@scottkellum) on CodePen.

The most popular approach seemed to be the ‘border-radius/border-width’ solution, and Scott Kellum had one of the first and still best take on that one. Creating the triangle with border mitre-edges isn’t too difficult, but getting in and out of the triangle transition in a elegant way was the hard part.

Scott’s code is very succinct and the animation is smooth. Nice.

Jeremy Karlsson (enjikaka) – SVG

See the Pen The Challenge: Recreate this GIF in Code by Jeremy Karlsson (@enjikaka) on CodePen.

As a big advocate of SVG, it was great to see an excellent SVG solution courtesy of Jeremy Karlsson. The SVG obviously changes the markup in this demo, but could be embedded as an image, object or CSS background. I think SVG might ultimately end up being be the best answer to this challenge.

You’ll see that Jeremy is using SVG’s <animate> functionality rather than CSS animation. It would be interesting to compare animation performance.

Simon Buerger (simonbuerger) – CSS Clip-path

See the Pen The Challenge: Recreate this GIF in Code by simonbuerger (@simonbuerger) on CodePen.

Simon Buerger is basing his solution on a reshaping CSS clip-path. You often see clip-path used with a ‘rectangle’, ‘circle’ or ‘ellipse’ values, but Simon is using the rarer ‘polygon’ value. Polygon takes a series of X Y values to create a mask shape.

img {
clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}

Clever stuff.

Sharat M R (cosmogenius) — CSS transforms

See the Pen The Challenge: Recreate this GIF in Code by Sharat M R (@cosmosgenius) on CodePen.

Sharat M R is doing some beautiful things here with CSS3 transforms. Both this and the next entry have based their approach on using CSS skews and rotations and it’s difficult to separate them.

To my eye, they are the two best pure ‘reproductions’ of the original animation — including timings and transitions.

Praseetha KR (@void_imagineer) — CSS transforms

See the Pen The Challenge: Recreate this GIF in Code by Praseetha KR (@Praseetha-KR) on CodePen.

The Challenge #1: SitePoint Selected

That brings us to Praseetha KR’s entry, which I’m happy to select as the inaugural challenge winner! As I said earlier, Sharat’s solution was a similarly impressive animation. Praseetha’s solution is slightly smaller and more modular due to it’s SASS underpinnings. Lovely code.

Great work from Praseetha KR, and indeed everyone who offered a solution. I think it’s proved to be a great way to test yourself and learn from others.

Thanks so much to everyone who participated.

P.S. Keep an eye out for ‘Challenge #2’ later in the week!

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 40+ of SitePoint's book covers.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!