JavaScript Plugin For CSS3 Powered Flip Animations - justFlipIt
File Size: | 27.8 KB |
---|---|
Views Total: | 8231 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.