Wallop – a minimal JavaScript library for showing & hiding elements
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.
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.