JavaScript Library To Flip Over DOM Elements – flippant.js

Preview:

Description:

flippant.js is a tiny and customizable JavaScript & CSS3 library intended to flip over DOM elements without any dependency.

How to use it:

Include the required flippant.css and flippant.js in your document.

<link rel="stylesheet" href="flippant.css">
<script src="flippant.js"></script>

Basic usage:

var front = document.getElementById('flipthis'), 

    // Generate or pull any HTML you want for the back.
    back_content = "<h1>I'm the back!</h1>", 

    back

// when the correct action happens, call flip!
// flip(element_to_flip, content_for_back, type(modal/card), classname_for_back) -> back_element
// e.g. back = flippant.flip(front, back_content, 'modal', 'my-modal-classname')
// back = flippant.flip(front, back_content, 'modal')
back = flippant.flip(front, back_content)
// this creates the back element, sizes it and flips it around.

// call the close method on the back element when it's time to close.
back.close()

// alternatively you can trigger a close event on the back element if you fancy.
var close_event = new CustomEvent('close')
back.dispatchEvent(close_event)