April 26, 2024

Wallop JavaScript Library for Content Sliders & Toggling Page Elements

A new JS/CSS animation library has recently been updated & ported over from generic content sliders to controlling various page elements at once.

Wallop was first created by Pedro Duarte as a way to manage elements on the page. It was originally named WallopSlider but just recently was rebranded to “Wallop”.

The idea is to offer more than just a slider: it’s really a fully-featured JavaScript library for animations and content manipulation. Of course it can be used to create a unique content slider, but it can also be used to merely hide & display certain elements at will.

Check out the Wallop homepage for a live demo. You’ll also find custom options and documentation for the plugin.

Wallop.js sample demo

The idea is to manually control animated elements as they switch off visibility with other elements. This typically relates to content sliders, but Wallop can be used with automatic transitions or through other controls besides Forward/Back buttons.

Some of Wallop’s primary benefits include:

  • Dependency free
  • Mobile first
  • Animations use pure CSS
  • Custom events and API
  • 4KB filesize when minified

Pedro organized a series of very basic demos hosted on CodePen where you can see Wallop in action.

If you’re looking for a dependency-free JavaScript animation library then Wallop may be the perfect tool for your project.

Grab the code for free off GitHub and play around to see what you can build. And since it’s all open source you’re free to make changes, offer commits into the repo, or even fork your own.

Jake is a creative writer and UI designer by trade. You can follow him on twitter @jakerocheleau or learn more at his personal website JakeRocheleau.com.

One Comment

Leave a Reply

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