Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Over the last year, Matthieu Aussaguel has been blogging a series named “Can you Code this UI Concept?” in which he finds user interface ideas that exist as GIFs, and then an implementation of that idea in real code. The implementations are already done in these posts, but it doesn’t mean you still can’t think of the originals as a challenge and try to build it yourself.

Here’s an example from each of the five volumes he’s published so far.

Vol. 1

Replace“  by Zee Young

Coded by Nikolay Talanov:

See the Pen Pull Down to Refresh (Paper Plane) by Nikolay Talanov (@suez) on CodePen.

Vol. 2

Fluid Switch” by Leonardo Zakour


See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen.

Vol. 3

Cut Copy Share Delete” by Sikrant

Coded by Ryan Mulligan:

See the Pen Cut Copy Share Delete by Ryan Mulligan (@hexagoncircle) on CodePen.

Vol. 4

No Bananas here” by John Torres

Coded by Ken Chen:

See the Pen Illustration for 404 Page by Ken Chen (@kenchen) on CodePen.

Vol. 5

Select Weight ” by Dejan Markovic

Coded by Varun Vachhar:

See the Pen Weight Selector by Varun Vachhar (@winkerVSbecks) on CodePen.

The idea is similar to Give ‘n’ Go.