What is wallop? It’s not just a slider – it’s a minimal JavaScript library for showing and hiding diverse elements. With wallop you can do an infinite number of things, controlling what’s shown or hidden with CSS.

Pedro Duarte – a talented front-end, prototype developer and the creator of wallop was happy to reveal the story behind this great project and told us a little about it:

I first created WallopSilder in October 2013 as a proof of concept. My goal was to create a progressive enhanced, zero-dependency slider library. I wanted to keep it as simple and as lightweight as possible, but at the same time, I wanted it to be powerful and flexible.

WallopSlider as a proof of concept worked just fine, but as an Open Source project, it was a major fail. So I just left it…

August 2015, I decided to pick it up again, but this time, do it properly. Here’s what I did:

– Fixed all the Issues, raised on Github
– Refactored the JavaScript
– Renamed from WallopSlider to wallop
– Added on npm and Bower
– Started doing semantic versioning and releases
– Wrote good documentation
– Wrote tests and integrated CI
– Built a new landing page
– Released

So now, wallop is no longer only a “Slider”, it’s more than that. It can be used in different contexts and fit different purposes. It’s a minimal 4kb JavaScript Library for showing and hiding things. With an API and CustomEvents, it makes it so flexible, the possibilities are endless.

Checkout the Readme (https://github.com/peduarte/wallop) for more details about the library itself, also some examples and real life examples. Here are some of them:

Basic implementation

See the Pen Wallop – basic implementation by designhooks (@designhooks) on CodePen.

Fade animation

See the Pen Fade animation – wallop by designhooks (@designhooks) on CodePen.

Fold animation

See the Pen fold animation – wallop by designhooks (@designhooks) on CodePen.

Check out the full collection of examples on Codepen and tell us what you think.

1 thought on “Wallop – a minimal JavaScript library for showing & hiding elements

  1. Due to its simplicity, wallop has a few limitations. For example, it is not possible to have the slide position animation based on gesture, or it’s not possible to include physics based animations based on gesture momentum.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You may also like