{"id":4591,"date":"2023-12-07T06:10:16","date_gmt":"2023-12-07T06:10:16","guid":{"rendered":"https:\/\/innovat.themewant.com\/?page_id=4591"},"modified":"2023-12-07T06:10:16","modified_gmt":"2023-12-07T06:10:16","slug":"before-after","status":"publish","type":"page","link":"https:\/\/aisgroups.in\/index.php\/before-after\/","title":{"rendered":"Before After"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4591\" class=\"elementor elementor-4591\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f53d86 e-con-full e-flex e-con e-parent\" data-id=\"3f53d86\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;content_width&quot;:&quot;full&quot;}\" data-core-v316-plus=\"true\">\n\t\t<div class=\"elementor-element elementor-element-009a744 e-con-full e-flex e-con e-child\" data-id=\"009a744\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-84242f7 elementor-widget elementor-widget-rt-after-befor-image\" data-id=\"84242f7\" data-element_type=\"widget\" data-widget_type=\"rt-after-befor-image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\r\n\t\t\r\n\r\n\t<!-- rs after-beforearea start -->\r\n\t<div class=\"rts-after-before-area-start\">\r\n\t\t<div class=\"after-before-main-wrapper-one\">\r\n\t\t\t<figure class=\"cd-image-container\">\r\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/themewant.com\/products\/wordpress\/innovat\/wp-content\/uploads\/2023\/11\/03-5.jpg\" alt=\"Original Image\">\r\n\t\t\t\t<span class=\"cd-image-label\" data-type=\"original\">After<\/span>\r\n\r\n\t\t\t\t<div class=\"cd-resize-img\">\r\n\t\t\t\t\t<!-- the resizable image on top -->\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/themewant.com\/products\/wordpress\/innovat\/wp-content\/uploads\/2023\/11\/04-5.jpg\" alt=\"Modified Image\">\r\n\t\t\t\t\t<span class=\"cd-image-label\" data-type=\"modified\">Before<\/span>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<span class=\"cd-handle\"><\/span>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>\r\n    <\/div>\r\n    <!-- rs after-beforearea end -->\r\n\r\n\t\t<script>\r\n\t\t\tfunction afterBefore(){\r\n\t\t\t\tjQuery(document).ready(function($){\r\n\t\t\t\t\tvar dragging = false,\r\n\t\t\t\t\t\tscrolling = false,\r\n\t\t\t\t\t\tresizing = false;\r\n\t\t\t\t\t\/\/cache jQuery objects\r\n\t\t\t\t\tvar imageComparisonContainers = $('.cd-image-container');\r\n\t\t\t\t\t\/\/check if the .cd-image-container is in the viewport \r\n\t\t\t\t\t\/\/if yes, animate it\r\n\t\t\t\t\tcheckPosition(imageComparisonContainers);\r\n\t\t\t\t\t$(window).on('scroll', function(){\r\n\t\t\t\t\t\tif( !scrolling) {\r\n\t\t\t\t\t\t\tscrolling =  true;\r\n\t\t\t\t\t\t\t( !window.requestAnimationFrame )\r\n\t\t\t\t\t\t\t\t? setTimeout(function(){checkPosition(imageComparisonContainers);}, 100)\r\n\t\t\t\t\t\t\t\t: requestAnimationFrame(function(){checkPosition(imageComparisonContainers);});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\t\t\t\t\t\r\n\t\t\t\t\t\/\/make the .cd-handle element draggable and modify .cd-resize-img width according to its position\r\n\t\t\t\t\timageComparisonContainers.each(function(){\r\n\t\t\t\t\t\tvar actual = $(this);\r\n\t\t\t\t\t\tdrags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type=\"original\"]'), actual.find('.cd-image-label[data-type=\"modified\"]'));\r\n\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\t\/\/upadate images label visibility\r\n\t\t\t\t\t$(window).on('resize', function(){\r\n\t\t\t\t\t\tif( !resizing) {\r\n\t\t\t\t\t\t\tresizing =  true;\r\n\t\t\t\t\t\t\t( !window.requestAnimationFrame )\r\n\t\t\t\t\t\t\t\t? setTimeout(function(){checkLabel(imageComparisonContainers);}, 100)\r\n\t\t\t\t\t\t\t\t: requestAnimationFrame(function(){checkLabel(imageComparisonContainers);});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\tfunction checkPosition(container) {\r\n\t\t\t\t\t\tcontainer.each(function(){\r\n\t\t\t\t\t\t\tvar actualContainer = $(this);\r\n\t\t\t\t\t\t\tif( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {\r\n\t\t\t\t\t\t\t\tactualContainer.addClass('is-visible');\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\t\tscrolling = false;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tfunction checkLabel(container) {\r\n\t\t\t\t\t\tcontainer.each(function(){\r\n\t\t\t\t\t\t\tvar actual = $(this);\r\n\t\t\t\t\t\t\tupdateLabel(actual.find('.cd-image-label[data-type=\"modified\"]'), actual.find('.cd-resize-img'), 'left');\r\n\t\t\t\t\t\t\tupdateLabel(actual.find('.cd-image-label[data-type=\"original\"]'), actual.find('.cd-resize-img'), 'right');\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\t\tresizing = false;\r\n\t\t\t\t\t}\r\n\t\t\t\r\n\t\t\t\t\tfunction drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {\r\n\t\t\t\t\t\tdragElement.on(\"mousedown vmousedown\", function(e) {\r\n\t\t\t\t\t\t\tdragElement.addClass('draggable');\r\n\t\t\t\t\t\t\tresizeElement.addClass('resizable');\r\n\t\t\t\t\r\n\t\t\t\t\t\t\tvar dragWidth = dragElement.outerWidth(),\r\n\t\t\t\t\t\t\t\txPosition = dragElement.offset().left + dragWidth - e.pageX,\r\n\t\t\t\t\t\t\t\tcontainerOffset = container.offset().left,\r\n\t\t\t\t\t\t\t\tcontainerWidth = container.outerWidth(),\r\n\t\t\t\t\t\t\t\tminLeft = containerOffset + 10,\r\n\t\t\t\t\t\t\t\tmaxLeft = containerOffset + containerWidth - dragWidth - 10;\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tdragElement.parents().on(\"mousemove vmousemove\", function(e) {\r\n\t\t\t\t\t\t\t\tif( !dragging) {\r\n\t\t\t\t\t\t\t\t\tdragging =  true;\r\n\t\t\t\t\t\t\t\t\t( !window.requestAnimationFrame )\r\n\t\t\t\t\t\t\t\t\t\t? setTimeout(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}, 100)\r\n\t\t\t\t\t\t\t\t\t\t: requestAnimationFrame(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);});\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}).on(\"mouseup vmouseup\", function(e){\r\n\t\t\t\t\t\t\t\tdragElement.removeClass('draggable');\r\n\t\t\t\t\t\t\t\tresizeElement.removeClass('resizable');\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\t\t}).on(\"mouseup vmouseup\", function(e) {\r\n\t\t\t\t\t\t\tdragElement.removeClass('draggable');\r\n\t\t\t\t\t\t\tresizeElement.removeClass('resizable');\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tfunction animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {\r\n\t\t\t\t\t\tvar leftValue = e.pageX + xPosition - dragWidth;   \r\n\t\t\t\t\t\t\/\/constrain the draggable element to move inside his container\r\n\t\t\t\t\t\tif(leftValue < minLeft ) {\r\n\t\t\t\t\t\t\tleftValue = minLeft;\r\n\t\t\t\t\t\t} else if ( leftValue > maxLeft) {\r\n\t\t\t\t\t\t\tleftValue = maxLeft;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t\tvar widthValue = (leftValue + dragWidth\/2 - containerOffset)*100\/containerWidth+'%';\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t$('.draggable').css('left', widthValue).on(\"mouseup vmouseup\", function() {\r\n\t\t\t\t\t\t\t$(this).removeClass('draggable');\r\n\t\t\t\t\t\t\tresizeElement.removeClass('resizable');\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\t\t$('.resizable').css('width', widthValue); \r\n\t\t\t\t\r\n\t\t\t\t\t\tupdateLabel(labelResizeElement, resizeElement, 'left');\r\n\t\t\t\t\t\tupdateLabel(labelContainer, resizeElement, 'right');\r\n\t\t\t\t\t\tdragging =  false;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tfunction updateLabel(label, resizeElement, position) {\r\n\t\t\t\t\t\tif(position == 'left') {\r\n\t\t\t\t\t\t\t( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t}\r\n    \t\tafterBefore();\r\n\t\t<\/script>\r\n\t\t\r\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-56d8ce5 e-flex e-con-boxed e-con e-parent\" data-id=\"56d8ce5\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-de70ee5 e-con-full e-flex e-con e-child\" data-id=\"de70ee5\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7d9727 elementor-widget elementor-widget-rt-after-befor-image\" data-id=\"d7d9727\" data-element_type=\"widget\" data-widget_type=\"rt-after-befor-image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\r\n\t\t\r\n\r\n\t<!-- rs after-beforearea start -->\r\n\t<div class=\"rts-after-before-area-start\">\r\n\t\t<div class=\"after-before-main-wrapper-one\">\r\n\t\t\t<figure class=\"cd-image-container\">\r\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/themewant.com\/products\/wordpress\/innovat\/wp-content\/uploads\/2023\/12\/01.png\" alt=\"Original Image\">\r\n\t\t\t\t<span class=\"cd-image-label\" data-type=\"original\">After<\/span>\r\n\r\n\t\t\t\t<div class=\"cd-resize-img\">\r\n\t\t\t\t\t<!-- the resizable image on top -->\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/themewant.com\/products\/wordpress\/innovat\/wp-content\/uploads\/2023\/12\/02.png\" alt=\"Modified Image\">\r\n\t\t\t\t\t<span class=\"cd-image-label\" data-type=\"modified\">Before<\/span>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<span class=\"cd-handle\"><\/span>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>\r\n    <\/div>\r\n    <!-- rs after-beforearea end -->\r\n\r\n\t\t<script>\r\n\t\t\tfunction afterBefore(){\r\n\t\t\t\tjQuery(document).ready(function($){\r\n\t\t\t\t\tvar dragging = false,\r\n\t\t\t\t\t\tscrolling = false,\r\n\t\t\t\t\t\tresizing = false;\r\n\t\t\t\t\t\/\/cache jQuery objects\r\n\t\t\t\t\tvar imageComparisonContainers = $('.cd-image-container');\r\n\t\t\t\t\t\/\/check if the .cd-image-container is in the viewport \r\n\t\t\t\t\t\/\/if yes, animate it\r\n\t\t\t\t\tcheckPosition(imageComparisonContainers);\r\n\t\t\t\t\t$(window).on('scroll', function(){\r\n\t\t\t\t\t\tif( !scrolling) {\r\n\t\t\t\t\t\t\tscrolling =  true;\r\n\t\t\t\t\t\t\t( !window.requestAnimationFrame )\r\n\t\t\t\t\t\t\t\t? setTimeout(function(){checkPosition(imageComparisonContainers);}, 100)\r\n\t\t\t\t\t\t\t\t: requestAnimationFrame(function(){checkPosition(imageComparisonContainers);});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\t\t\t\t\t\r\n\t\t\t\t\t\/\/make the .cd-handle element draggable and modify .cd-resize-img width according to its position\r\n\t\t\t\t\timageComparisonContainers.each(function(){\r\n\t\t\t\t\t\tvar actual = $(this);\r\n\t\t\t\t\t\tdrags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type=\"original\"]'), actual.find('.cd-image-label[data-type=\"modified\"]'));\r\n\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\t\/\/upadate images label visibility\r\n\t\t\t\t\t$(window).on('resize', function(){\r\n\t\t\t\t\t\tif( !resizing) {\r\n\t\t\t\t\t\t\tresizing =  true;\r\n\t\t\t\t\t\t\t( !window.requestAnimationFrame )\r\n\t\t\t\t\t\t\t\t? setTimeout(function(){checkLabel(imageComparisonContainers);}, 100)\r\n\t\t\t\t\t\t\t\t: requestAnimationFrame(function(){checkLabel(imageComparisonContainers);});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\tfunction checkPosition(container) {\r\n\t\t\t\t\t\tcontainer.each(function(){\r\n\t\t\t\t\t\t\tvar actualContainer = $(this);\r\n\t\t\t\t\t\t\tif( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {\r\n\t\t\t\t\t\t\t\tactualContainer.addClass('is-visible');\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\t\tscrolling = false;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tfunction checkLabel(container) {\r\n\t\t\t\t\t\tcontainer.each(function(){\r\n\t\t\t\t\t\t\tvar actual = $(this);\r\n\t\t\t\t\t\t\tupdateLabel(actual.find('.cd-image-label[data-type=\"modified\"]'), actual.find('.cd-resize-img'), 'left');\r\n\t\t\t\t\t\t\tupdateLabel(actual.find('.cd-image-label[data-type=\"original\"]'), actual.find('.cd-resize-img'), 'right');\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\t\tresizing = false;\r\n\t\t\t\t\t}\r\n\t\t\t\r\n\t\t\t\t\tfunction drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {\r\n\t\t\t\t\t\tdragElement.on(\"mousedown vmousedown\", function(e) {\r\n\t\t\t\t\t\t\tdragElement.addClass('draggable');\r\n\t\t\t\t\t\t\tresizeElement.addClass('resizable');\r\n\t\t\t\t\r\n\t\t\t\t\t\t\tvar dragWidth = dragElement.outerWidth(),\r\n\t\t\t\t\t\t\t\txPosition = dragElement.offset().left + dragWidth - e.pageX,\r\n\t\t\t\t\t\t\t\tcontainerOffset = container.offset().left,\r\n\t\t\t\t\t\t\t\tcontainerWidth = container.outerWidth(),\r\n\t\t\t\t\t\t\t\tminLeft = containerOffset + 10,\r\n\t\t\t\t\t\t\t\tmaxLeft = containerOffset + containerWidth - dragWidth - 10;\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tdragElement.parents().on(\"mousemove vmousemove\", function(e) {\r\n\t\t\t\t\t\t\t\tif( !dragging) {\r\n\t\t\t\t\t\t\t\t\tdragging =  true;\r\n\t\t\t\t\t\t\t\t\t( !window.requestAnimationFrame )\r\n\t\t\t\t\t\t\t\t\t\t? setTimeout(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}, 100)\r\n\t\t\t\t\t\t\t\t\t\t: requestAnimationFrame(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);});\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}).on(\"mouseup vmouseup\", function(e){\r\n\t\t\t\t\t\t\t\tdragElement.removeClass('draggable');\r\n\t\t\t\t\t\t\t\tresizeElement.removeClass('resizable');\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\t\t}).on(\"mouseup vmouseup\", function(e) {\r\n\t\t\t\t\t\t\tdragElement.removeClass('draggable');\r\n\t\t\t\t\t\t\tresizeElement.removeClass('resizable');\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tfunction animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {\r\n\t\t\t\t\t\tvar leftValue = e.pageX + xPosition - dragWidth;   \r\n\t\t\t\t\t\t\/\/constrain the draggable element to move inside his container\r\n\t\t\t\t\t\tif(leftValue < minLeft ) {\r\n\t\t\t\t\t\t\tleftValue = minLeft;\r\n\t\t\t\t\t\t} else if ( leftValue > maxLeft) {\r\n\t\t\t\t\t\t\tleftValue = maxLeft;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t\tvar widthValue = (leftValue + dragWidth\/2 - containerOffset)*100\/containerWidth+'%';\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t$('.draggable').css('left', widthValue).on(\"mouseup vmouseup\", function() {\r\n\t\t\t\t\t\t\t$(this).removeClass('draggable');\r\n\t\t\t\t\t\t\tresizeElement.removeClass('resizable');\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\t\t$('.resizable').css('width', widthValue); \r\n\t\t\t\t\r\n\t\t\t\t\t\tupdateLabel(labelResizeElement, resizeElement, 'left');\r\n\t\t\t\t\t\tupdateLabel(labelContainer, resizeElement, 'right');\r\n\t\t\t\t\t\tdragging =  false;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tfunction updateLabel(label, resizeElement, position) {\r\n\t\t\t\t\t\tif(position == 'left') {\r\n\t\t\t\t\t\t\t( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t}\r\n    \t\tafterBefore();\r\n\t\t<\/script>\r\n\t\t\r\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-40ab339 e-con-full e-flex e-con e-child\" data-id=\"40ab339\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-46c3bbd elementor-widget elementor-widget-rt-after-befor-image\" data-id=\"46c3bbd\" data-element_type=\"widget\" data-widget_type=\"rt-after-befor-image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\r\n\t\t\r\n\r\n\t<!-- rs after-beforearea start -->\r\n\t<div class=\"rts-after-before-area-start\">\r\n\t\t<div class=\"after-before-main-wrapper-one\">\r\n\t\t\t<figure class=\"cd-image-container\">\r\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/themewant.com\/products\/wordpress\/innovat\/wp-content\/uploads\/2023\/12\/05-1.jpg\" alt=\"Original Image\">\r\n\t\t\t\t<span class=\"cd-image-label\" data-type=\"original\">After<\/span>\r\n\r\n\t\t\t\t<div class=\"cd-resize-img\">\r\n\t\t\t\t\t<!-- the resizable image on top -->\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/themewant.com\/products\/wordpress\/innovat\/wp-content\/uploads\/2023\/12\/06.jpg\" alt=\"Modified Image\">\r\n\t\t\t\t\t<span class=\"cd-image-label\" data-type=\"modified\">Before<\/span>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<span class=\"cd-handle\"><\/span>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>\r\n    <\/div>\r\n    <!-- rs after-beforearea end -->\r\n\r\n\t\t<script>\r\n\t\t\tfunction afterBefore(){\r\n\t\t\t\tjQuery(document).ready(function($){\r\n\t\t\t\t\tvar dragging = false,\r\n\t\t\t\t\t\tscrolling = false,\r\n\t\t\t\t\t\tresizing = false;\r\n\t\t\t\t\t\/\/cache jQuery objects\r\n\t\t\t\t\tvar imageComparisonContainers = $('.cd-image-container');\r\n\t\t\t\t\t\/\/check if the .cd-image-container is in the viewport \r\n\t\t\t\t\t\/\/if yes, animate it\r\n\t\t\t\t\tcheckPosition(imageComparisonContainers);\r\n\t\t\t\t\t$(window).on('scroll', function(){\r\n\t\t\t\t\t\tif( !scrolling) {\r\n\t\t\t\t\t\t\tscrolling =  true;\r\n\t\t\t\t\t\t\t( !window.requestAnimationFrame )\r\n\t\t\t\t\t\t\t\t? setTimeout(function(){checkPosition(imageComparisonContainers);}, 100)\r\n\t\t\t\t\t\t\t\t: requestAnimationFrame(function(){checkPosition(imageComparisonContainers);});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\t\t\t\t\t\r\n\t\t\t\t\t\/\/make the .cd-handle element draggable and modify .cd-resize-img width according to its position\r\n\t\t\t\t\timageComparisonContainers.each(function(){\r\n\t\t\t\t\t\tvar actual = $(this);\r\n\t\t\t\t\t\tdrags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type=\"original\"]'), actual.find('.cd-image-label[data-type=\"modified\"]'));\r\n\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\t\/\/upadate images label visibility\r\n\t\t\t\t\t$(window).on('resize', function(){\r\n\t\t\t\t\t\tif( !resizing) {\r\n\t\t\t\t\t\t\tresizing =  true;\r\n\t\t\t\t\t\t\t( !window.requestAnimationFrame )\r\n\t\t\t\t\t\t\t\t? setTimeout(function(){checkLabel(imageComparisonContainers);}, 100)\r\n\t\t\t\t\t\t\t\t: requestAnimationFrame(function(){checkLabel(imageComparisonContainers);});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\tfunction checkPosition(container) {\r\n\t\t\t\t\t\tcontainer.each(function(){\r\n\t\t\t\t\t\t\tvar actualContainer = $(this);\r\n\t\t\t\t\t\t\tif( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {\r\n\t\t\t\t\t\t\t\tactualContainer.addClass('is-visible');\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\t\tscrolling = false;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tfunction checkLabel(container) {\r\n\t\t\t\t\t\tcontainer.each(function(){\r\n\t\t\t\t\t\t\tvar actual = $(this);\r\n\t\t\t\t\t\t\tupdateLabel(actual.find('.cd-image-label[data-type=\"modified\"]'), actual.find('.cd-resize-img'), 'left');\r\n\t\t\t\t\t\t\tupdateLabel(actual.find('.cd-image-label[data-type=\"original\"]'), actual.find('.cd-resize-img'), 'right');\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\t\tresizing = false;\r\n\t\t\t\t\t}\r\n\t\t\t\r\n\t\t\t\t\tfunction drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {\r\n\t\t\t\t\t\tdragElement.on(\"mousedown vmousedown\", function(e) {\r\n\t\t\t\t\t\t\tdragElement.addClass('draggable');\r\n\t\t\t\t\t\t\tresizeElement.addClass('resizable');\r\n\t\t\t\t\r\n\t\t\t\t\t\t\tvar dragWidth = dragElement.outerWidth(),\r\n\t\t\t\t\t\t\t\txPosition = dragElement.offset().left + dragWidth - e.pageX,\r\n\t\t\t\t\t\t\t\tcontainerOffset = container.offset().left,\r\n\t\t\t\t\t\t\t\tcontainerWidth = container.outerWidth(),\r\n\t\t\t\t\t\t\t\tminLeft = containerOffset + 10,\r\n\t\t\t\t\t\t\t\tmaxLeft = containerOffset + containerWidth - dragWidth - 10;\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tdragElement.parents().on(\"mousemove vmousemove\", function(e) {\r\n\t\t\t\t\t\t\t\tif( !dragging) {\r\n\t\t\t\t\t\t\t\t\tdragging =  true;\r\n\t\t\t\t\t\t\t\t\t( !window.requestAnimationFrame )\r\n\t\t\t\t\t\t\t\t\t\t? setTimeout(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}, 100)\r\n\t\t\t\t\t\t\t\t\t\t: requestAnimationFrame(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);});\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}).on(\"mouseup vmouseup\", function(e){\r\n\t\t\t\t\t\t\t\tdragElement.removeClass('draggable');\r\n\t\t\t\t\t\t\t\tresizeElement.removeClass('resizable');\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\t\t}).on(\"mouseup vmouseup\", function(e) {\r\n\t\t\t\t\t\t\tdragElement.removeClass('draggable');\r\n\t\t\t\t\t\t\tresizeElement.removeClass('resizable');\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tfunction animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {\r\n\t\t\t\t\t\tvar leftValue = e.pageX + xPosition - dragWidth;   \r\n\t\t\t\t\t\t\/\/constrain the draggable element to move inside his container\r\n\t\t\t\t\t\tif(leftValue < minLeft ) {\r\n\t\t\t\t\t\t\tleftValue = minLeft;\r\n\t\t\t\t\t\t} else if ( leftValue > maxLeft) {\r\n\t\t\t\t\t\t\tleftValue = maxLeft;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t\tvar widthValue = (leftValue + dragWidth\/2 - containerOffset)*100\/containerWidth+'%';\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t$('.draggable').css('left', widthValue).on(\"mouseup vmouseup\", function() {\r\n\t\t\t\t\t\t\t$(this).removeClass('draggable');\r\n\t\t\t\t\t\t\tresizeElement.removeClass('resizable');\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\t\t$('.resizable').css('width', widthValue); \r\n\t\t\t\t\r\n\t\t\t\t\t\tupdateLabel(labelResizeElement, resizeElement, 'left');\r\n\t\t\t\t\t\tupdateLabel(labelContainer, resizeElement, 'right');\r\n\t\t\t\t\t\tdragging =  false;\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\tfunction updateLabel(label, resizeElement, position) {\r\n\t\t\t\t\t\tif(position == 'left') {\r\n\t\t\t\t\t\t\t( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t}\r\n    \t\tafterBefore();\r\n\t\t<\/script>\r\n\t\t\r\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-64ed505 e-flex e-con-boxed e-con e-parent\" data-id=\"64ed505\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-855d1fa elementor-widget__width-initial elementor-widget elementor-widget-react-heading\" data-id=\"855d1fa\" data-element_type=\"widget\" data-widget_type=\"react-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n\t\t<div class=\"react-heading style9 center title-border-no\">\r\n\t\t\t<div class=\"title-inner no\">\r\n\t\t\t\t<div class=\"image-heading\"><div class=\"title-img top\"> <img decoding=\"async\" src=\"https:\/\/themewant.com\/products\/wordpress\/innovat\/wp-content\/uploads\/2023\/11\/02.png\" alt=\"title-image\" \/><\/div><div class=\"skew-up \"><span class=\"sub-text word-line\">Work with us<\/span><\/div><\/div><div class=\"skew-up \"><h2 class=\"title word-line\">Have a Project in mind? <br>Do not hesitate to say hello.<\/h2><\/div>\r\n\r\n\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t<\/div>\r\n\r\n\t\t<script>\r\n\t\t\tjQuery(document).ready(function(){\r\n\r\n\t\t\tlet addAnimation = function () {\r\n\t\t\tjQuery(\".skew-up\").each(function (index) {\r\n\t\t\t\tconst text = new SplitType(jQuery(this), {\r\n\t\t\t\ttypes: \"lines, words\",\r\n\t\t\t\tlineClass: \"word-line\"\r\n\t\t\t\t});    let textInstance = jQuery(this);\r\n\t\t\t\tlet line = textInstance.find(\".word-line\");\r\n\t\t\t\tlet word = line.find(\".word\");    let tl = gsap.timeline({\r\n\t\t\t\tscrollTrigger: {\r\n\t\t\t\t\ttrigger: textInstance,\r\n\t\t\t\t\tstart: \"top 85%\",\r\n\t\t\t\t\tend: \"top 100%\",\r\n\t\t\t\t\tonComplete: function () {\r\n\t\t\t\t\tjQuery(textInstance).removeClass(\"skew-up\");\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\t});    tl.set(textInstance, { opacity: 1 }).from(word, {\r\n\t\t\t\ty: \"100%\",\r\n\t\t\t\tskewX: \"-5\",\r\n\t\t\t\tduration: 2,\r\n\t\t\t\tstagger: 0.03,\r\n\t\t\t\tease: \"expo.out\"\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t\t};addAnimation();window.addEventListener(\"resize\", function (event) {\r\n\t\t\t\tif (jQuery(window).width() >= 992) {addAnimation(); }\r\n\t\t\t});\r\n\r\n\r\n\t\t\t\r\n\r\n\t\t});\r\n   \r\n\t\t<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e103660 elementor-widget elementor-widget-rts-btn\" data-id=\"e103660\" data-element_type=\"widget\" data-widget_type=\"rts-btn.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\r\n\t\t\r\n\t\t<div class=\"rts-btn-wrapper\">\r\n\t\t\t\t\t\t<a class=\"rts-btn center secondary_btn\" href=\"#\" >\t\t\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t<span class=\"btn_text\">Let\u2019s Build<\/span>\r\n\t\t\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"rt rt-arrow-right\"><\/i>\t\t\t\t\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t<\/div>    \r\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>After Before After Before After Before Work with us Have a Project in mind? Do not hesitate to say hello. Let\u2019s Build<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4591","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aisgroups.in\/index.php\/wp-json\/wp\/v2\/pages\/4591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aisgroups.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aisgroups.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aisgroups.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aisgroups.in\/index.php\/wp-json\/wp\/v2\/comments?post=4591"}],"version-history":[{"count":0,"href":"https:\/\/aisgroups.in\/index.php\/wp-json\/wp\/v2\/pages\/4591\/revisions"}],"wp:attachment":[{"href":"https:\/\/aisgroups.in\/index.php\/wp-json\/wp\/v2\/media?parent=4591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}