Much like the caterpillar, your image will undergo a clear transformation with Cocoen. Making comparison really easy, it’s as straightforward way of seeing your images in a new light.
JavaScript CSS
Clone or download
Latest commit 01a71e8 Jan 10, 2018
Failed to load latest commit information.
dist fix #31 Jun 28, 2017
docs fix #31 Jun 28, 2017
gulp bugfix css Mar 11, 2017
src fix #31 Jun 28, 2017
.babelrc fixes #27 Mar 15, 2017
.eslintignore eslintignore Mar 11, 2017
.eslintrc feat(js): init methods Mar 10, 2017
.gitignore add jekyll theme to docs Mar 10, 2017
.nvmrc fix #31 Jun 28, 2017
.travis.yml fix travis Mar 8, 2017
LICENSE Initial commit Nov 10, 2015 Update Jan 9, 2018
bower.json fix conflict Mar 24, 2017
gulpfile.babel.js setup gulp Mar 7, 2017
package-lock.json fix #31 Jun 28, 2017
package.json fix #31 Jun 28, 2017
readme.gif feat(readme): new gif Nov 17, 2015
sass-lint.yml jquery support Mar 11, 2017

Travis-CI David npm

Touch-enabled before/after slider. Inspired by before-after.js.

Quick start



Install with NPM

npm install cocoen --save

Install with Bower

bower install cocoen --save

Or download the latest release.


Only the class cocoen is mandatory to apply proper default styles:

<div class="cocoen">
  <img src="img/before.jpg" alt="">
  <img src="img/after.jpg" alt="">

Include the Cocoen stylesheet in your page:

<link rel="stylesheet" href="css/cocoen.min.css" />

Pure Javascript

Include the cocoen.min.js script in your page, and then:

new Cocoen(document.querySelector('.cocoen'));

Multiple Cocoens in one page:

  new Cocoen(element);


Include the cocoen.min.js and cocoen-jquery.min.js scripts in your page, and then:



The code and the documentation are released under the MIT License.