diff --git a/dom-node-appear/README.md b/dom-node-appear/README.md
new file mode 100644
index 0000000..d40adeb
--- /dev/null
+++ b/dom-node-appear/README.md
@@ -0,0 +1,12 @@
+DOMNodeAppear - .appears
+-------------
+It's a version of [DOMNodeAppear]() for xuijs. It will be useful when you don't need jquery or don't want to include it.
+
+IMPORTANT!
+
+It doesn't work with ".find" method, only with `x$('selector')`.
+
+For more informations about this:
+
+* [DOMNodeAppear](https://github.com/liamdanger/jQuery.DOMNodeAppear)
+* [Back Alley Coder](http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/)
\ No newline at end of file
diff --git a/dom-node-appear/dom-node-appear.js b/dom-node-appear/dom-node-appear.js
new file mode 100644
index 0000000..c570ca7
--- /dev/null
+++ b/dom-node-appear/dom-node-appear.js
@@ -0,0 +1,78 @@
+xui.extend({
+ /**
+ *
+ * This executes a callback only when the element appears on the DOM
+ *
+ * @param {Function} callback Function that will be called when the element appears on the DOM.
+ * @return self
+ * @example
+ *
+ * ### DOMNodeAppear
+ *
+ * syntax:
+ *
+ * DOMNodeAppear(callback);
+ *
+ * example:
+ *
+ * x$('#node').DOMNodeAppear(function () {
+ * //do something
+ * });
+ *
+ */
+ DOMNodeAppear: function(callback) {
+ var self = this,
+ head = x$('head'),
+
+ //Options of animation
+ options = {
+ keyframes: "@keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-moz-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-webkit-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-ms-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-o-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } }, ",
+ selector: self.selector,
+ stylesClass: self.selector.replace(".", ""),
+ styles: self.selector + " { animation-name: nodeInserted; -webkit-animation-name: nodeInserted; animation-duration: 0.001s; -webkit-animation-duration: 0.001s; }"
+ },
+
+ //list of events
+ events = 'animationstart webkitAnimationStart oanimationstart MSAnimationStart'.split(' '),
+
+ //Callback of dom node appear
+ animationStart = function (event) {
+ var target = x$(event.target),
+ targetSelector = x$(options.selector);
+
+ targetSelector = targetSelector[targetSelector.length -1];
+
+ if ((event.animationName === 'nodeInserted' && target[0] === targetSelector) && typeof callback === 'function') {
+ callback.call(target[0], target);
+ }
+ };
+
+ //if the keyframes aren't present, add them in a style element
+ if(!x$("style.domnodeappear-keyframes").length) {
+ head.bottom("");
+ }
+
+ //add animation to selected element
+ head.bottom("")
+
+ //Attaches events to the document
+ events.forEach(function (eventString) {
+ x$(document).on(eventString, animationStart);
+ });
+
+ return this;
+ }
+});
+
+//It just exists to get the selector
+//It saves the reference of the xui and replaces the main "find" in order to save the selector
+(function (window) {
+ var _xui = xui;
+
+ window.x$ = window.xui = xui = function(q, context) {
+ var _Xui = _xui.apply(this, arguments);
+
+ _Xui.selector = q;
+ return _Xui;
+ };
+}(window));
diff --git a/dom-node-appear/example.html b/dom-node-appear/example.html
new file mode 100644
index 0000000..57509b4
--- /dev/null
+++ b/dom-node-appear/example.html
@@ -0,0 +1,70 @@
+
+
+
+
+ Dom Node Appear - XUIJS
+
+
+
+
+
+
+
+
+
No new Elements
+
+