JavaScript Plugin For CSS3 Powered Flip Animations - justFlipIt

justFlipIt is a lightweight JavaScript plugin that allows you to implement CSS3 or Web Animations API based flip animations on any DOM elements.

Supports both click and hover events. Works both with Vanilla JavaScript and jQuery.

How to use it:

1. Install & import.

# NPM
$ npm install @simhub2/justflipit

import justFlipIt from "@simhub2/justflipit";

2. Or directly load the core JavaScript in your document.

<!-- Vanilla JavaScript + CSS3 Transitions -->
<script src="/path/to/justFlipIt-vanilla.min.js"></script>

<!-- Modern + Web Animation API -->
<script src="/path/to/justFlipIt-modern.min.js"></script>

<!-- jQuery Version -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/justFlipIt-combined.min.js"></script>

3. Implement a basic flip animation on your DOM element.

// Vanilla JavaScript
justFlipIt(".element");

// jQuery
$(".element").justFlipIt();

4. Change the event listener to 'click'.

$(element).justFlipIt({
  click: true
});

5. Custom text/Html you want to flip.

$(element).justFlipIt({
  template:'[html] or TEXT'
});

6. Flip the element along the x-axis.

$(element).justFlipIt({
  flipx: true
});

7. Apply additional CSS styles.

$(element).justFlipIt({
  style: []
});

8. Config the animations.

$(element).justFlipIt({
  duration: 400,
  easing: "ease-in-out", //  e.g. "linear", "ease-in", "cubic-bezier(...)".
});

9. Determine whether to inherit all CSS styles & classes from the original element to the card. Default: true.

$(element).justFlipIt({
  preserveClasses: false, 
  preserveStyles: false
});

10. Destroy the instance.

$(element).destroy();

Changelog:

v3.1.1 (2025-05-28)

• small Bugfixes

v3.1.0 (2025-05-26)

• Added new options

v3.0.1 (2025-05-24)

• Works with or without jQuery
• Multiple import methods (script tag, npm, ES modules)
• Lightweight and fast
• Compatible with all modern browsers and legacy browsers (with fallbacks)
• Uses modern Web Animations API when available
• Easy to customize with CSS
• Bugfix
• Doc updated
• Demo updated

v2.0 (2019-07-30)

• new feature - destroy()
• some bug fixes

2018-01-11

• update

---

This awesome jQuery plugin is developed by SimHub. For more Advanced Usages, please check the demo page or visit the official website.