@innovastudio/contentbox 1.4.28 → 1.4.30

package/public/contentbox/contentbox.esm.js

@@ -312,6 +312,79 @@ const prepareSvgIcons$1 = builder => {
                 <line x1="4" y1="20" x2="20" y2="20" />
             </symbol>
 
+            <symbol id="icon-arrow-right" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+                <line x1="15" y1="16" x2="19" y2="12"></line>
+                <line x1="15" y1="8" x2="19" y2="12"></line>
+            </symbol>
+
+            <symbol id="icon-arrow-left" viewBox="0 0 24 24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+                <line x1="5" y1="12" x2="9" y2="16"></line>
+                <line x1="5" y1="12" x2="9" y2="8"></line>
+            </symbol>
+            
+            <symbol id="icon-arrow-up" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <line x1="12" y1="5" x2="12" y2="19"></line>
+                <line x1="16" y1="9" x2="12" y2="5"></line>
+                <line x1="8" y1="9" x2="12" y2="5"></line>
+            </symbol>
+
+            <symbol id="icon-arrow-down" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <line x1="12" y1="5" x2="12" y2="19"></line>
+                <line x1="16" y1="15" x2="12" y2="19"></line>
+                <line x1="8" y1="15" x2="12" y2="19"></line>
+            </symbol>
+
+            <symbol id="icon-rotate-clockwise" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5"></path>
+                <line x1="5.63" y1="7.16" x2="5.63" y2="7.17"></line>
+                <line x1="4.06" y1="11" x2="4.06" y2="11.01"></line>
+                <line x1="4.63" y1="15.1" x2="4.63" y2="15.11"></line>
+                <line x1="7.16" y1="18.37" x2="7.16" y2="18.38"></line>
+                <line x1="11" y1="19.94" x2="11" y2="19.95"></line>
+            </symbol>
+
+            <symbol id="icon-rotate-2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M15 4.55a8 8 0 0 0 -6 14.9m0 -4.45v5h-5"></path>
+                <line x1="18.37" y1="7.16" x2="18.37" y2="7.17"></line>
+                <line x1="13" y1="19.94" x2="13" y2="19.95"></line>
+                <line x1="16.84" y1="18.37" x2="16.84" y2="18.38"></line>
+                <line x1="19.37" y1="15.1" x2="19.37" y2="15.11"></line>
+                <line x1="19.94" y1="11" x2="19.94" y2="11.01"></line>
+            </symbol>
+
+            <symbol viewBox="0 0 24 24" id="icon-arrows-diagonal" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <polyline points="16 4 20 4 20 8"></polyline>
+                <line x1="14" y1="10" x2="20" y2="4"></line>
+                <polyline points="8 20 4 20 4 16"></polyline>
+                <line x1="4" y1="20" x2="10" y2="14"></line>
+            </symbol>
+            
+            <symbol viewBox="0 0 24 24" id="icon-arrows-diagonal-minimize" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M18 10h-4v-4"></path>
+                <path d="M20 4l-6 6"></path>
+                <path d="M6 14h4v4"></path>
+                <path d="M10 14l-6 6"></path>
+            </symbol>
+
+            <symbol id="icon-circle-half" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <circle cx="12" cy="12" r="9"></circle>
+                <path d="M12 3v18"></path>
+                <path d="M12 14l7 -7"></path>
+                <path d="M12 19l8.5 -8.5"></path>
+                <path d="M12 9l4.5 -4.5"></path>
+            </symbol>
+
             </defs>
         </svg>`;
   const builderStuff = builder.builderStuff;
@@ -3838,8 +3911,16 @@ class EditSection {
     btnSectionHeight.forEach(btn => {
       btn.addEventListener('click', () => {
         this.builder.editor.saveForUndo();
-        let val = btn.getAttribute('data-value');
-        this.sectionHeight(val);
+        let val = btn.getAttribute('data-value'); // this.sectionHeight(val);
+
+        const activeSection = this.builder.activeSection;
+        activeSection.classList.add('transition-edit');
+        setTimeout(() => {
+          this.sectionHeight(val);
+          setTimeout(() => {
+            activeSection.classList.remove('transition-edit');
+          }, 200);
+        }, 10);
         let btns = modalEditSection.querySelectorAll('.cmd-section-height');
         btns.forEach(btn => {
           dom$k.removeClass(btn, 'on');
@@ -4406,8 +4487,7 @@ class EditSection {
     } //Trigger Render event
 
 
-    this.builder.settings.onRender();
-    this.builder.scrollTo(activeSection, 600);
+    this.builder.settings.onRender(); // this.builder.scrollTo(activeSection, 600);
   }
 
   boxSpacing(s) {
@@ -10234,15 +10314,31 @@ class EditBox {
     modalEditBox.querySelector('#tabBoxGeneral').click();
     const btnBoxSmaller = modalEditBox.querySelector('.cmd-box-smaller');
     btnBoxSmaller.addEventListener('click', () => {
-      this.builder.editor.saveForUndo();
-      this.boxWidthSmaller(); //Trigger Change event
+      this.builder.editor.saveForUndo(); // this.boxWidthSmaller();
+
+      const activeSection = this.builder.activeSection;
+      activeSection.classList.add('transition-edit');
+      setTimeout(() => {
+        this.boxWidthSmaller();
+        setTimeout(() => {
+          activeSection.classList.remove('transition-edit');
+        }, 200);
+      }, 10); //Trigger Change event
 
       this.builder.settings.onChange();
     });
     const btnBoxLarger = modalEditBox.querySelector('.cmd-box-larger');
     btnBoxLarger.addEventListener('click', () => {
-      this.builder.editor.saveForUndo();
-      this.boxWidthLarger(); //Trigger Change event
+      this.builder.editor.saveForUndo(); // this.boxWidthLarger();
+
+      const activeSection = this.builder.activeSection;
+      activeSection.classList.add('transition-edit');
+      setTimeout(() => {
+        this.boxWidthLarger();
+        setTimeout(() => {
+          activeSection.classList.remove('transition-edit');
+        }, 200);
+      }, 10); //Trigger Change event
 
       this.builder.settings.onChange();
     });
@@ -11677,11 +11773,13 @@ class EditBox {
       const inpModuleCustomCode = builderStuff.querySelector('#txtBoxCustomCode');
       hidModuleCustomCode.value = inpModuleCustomCode.value; //Save Html (original)
 
-      activeModule.setAttribute('data-html', encodeURIComponent(hidModuleCustomCode.value)); //Render (programmatically)
+      activeModule.setAttribute('data-html', encodeURIComponent(hidModuleCustomCode.value));
+      let html = hidModuleCustomCode.value;
+      html = html.replace(/{id}/g, dom$j.uniqueId()); //Render (programmatically)
 
       let range = document.createRange();
       activeModule.innerHTML = '';
-      activeModule.appendChild(range.createContextualFragment(hidModuleCustomCode.value)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
+      activeModule.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
       //Trigger Render event
 
       this.builder.settings.onRender(); //Trigger Change event
@@ -12028,6 +12126,26 @@ class EditBox {
       dom$j.removeClass(activeBox, 'box-active');
       this.builder.showTools();
     });
+    /*
+    // Experimental
+    modalEditBox.style.display = 'flex';
+    document.body.classList.add('side-open');
+    let panel = modalEditBox.querySelector('.is-modal-content');
+    setTimeout(()=>{
+        this.builder.showModal(modalEditBox, false, ()=>{
+            dom.removeClass(activeBox, 'box-active');
+            
+            this.builder.showTools();
+             document.body.classList.remove('side-open');
+            this.builder.wrapperEl.style.transition = 'none';
+            setTimeout(()=>{
+                modalEditBox.style.display = '';
+                this.builder.wrapperEl.style.transition = '';
+            }, 200);
+        });
+    }, 10);
+    */
+
     modalEditBox.focus();
 
     if (container) {
@@ -17640,7 +17758,7 @@ class Util {
 
     const cellCount = row.childElementCount - num;
     const rowClass = this.builder.opts.row;
-    const colClass = this.builder.opts.cols;
+    let colClass = this.builder.opts.cols;
     const colEqual = this.builder.opts.colequal;
 
     if (colEqual.length > 0) {
@@ -17681,7 +17799,21 @@ class Util {
       let n = 0;
       const cols = dom.elementChildren(row);
       cols.forEach(col => {
-        if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
+        if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return; // Bootstrap stuff
+
+        col.classList.forEach(item => {
+          if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
+            colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
+          } else if (item.indexOf('col-xs-') !== -1) {
+            colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
+          } else if (item.indexOf('col-lg-') !== -1) {
+            colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
+          } else if (item.indexOf('col-xl-') !== -1) {
+            colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
+          } else if (item.indexOf('col-xxl-') !== -1) {
+            colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
+          }
+        });
         n++;
 
         for (var i = 0; i <= colClass.length - 1; i++) {
@@ -17691,7 +17823,10 @@ class Util {
         if (cellCount === 1) dom.addClass(col, colClass[11]);
         if (cellCount === 2) dom.addClass(col, colClass[5]);
         if (cellCount === 3) dom.addClass(col, colClass[3]);
-        if (cellCount === 4) dom.addClass(col, colClass[2]);
+
+        if (cellCount === 4) {
+          dom.addClass(col, colClass[2]);
+        }
 
         if (cellCount === 5) {
           // 2, 2, 2, 2, 4
@@ -28469,7 +28604,11 @@ class HtmlUtil {
     if (elm) builderStuff.removeChild(elm); // return html;
 
     let beautify = JsBeautify.html;
-    return beautify(html);
+    html = beautify(html); // https://stackoverflow.com/questions/22962220/remove-multiple-line-breaks-n-in-javascript
+    // html = html.replace(/(\r\n|\r|\n){2}/g, '$1').replace(/(\r\n|\r|\n){3,}/g, '$1\n')
+
+    html = html.replace(/(\r\n|\r|\n){3,}/g, '$1\n');
+    return html;
   }
 
 }
@@ -30817,7 +30956,7 @@ class Grid {
     }
 
     const rowClass = builder.opts.row;
-    const colClass = builder.opts.cols;
+    let colClass = builder.opts.cols;
     const colSizes = builder.opts.colsizes;
 
     if (rowClass !== '' && colClass.length > 0 && colSizes.length > 0) {
@@ -30870,6 +31009,21 @@ class Grid {
 
 
     if (rowClass !== '' && colClass.length > 0) {
+      // Bootstrap stuff
+      cell.classList.forEach(item => {
+        if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
+          colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
+        } else if (item.indexOf('col-xs-') !== -1) {
+          colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
+        } else if (item.indexOf('col-lg-') !== -1) {
+          colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
+        } else if (item.indexOf('col-xl-') !== -1) {
+          colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
+        } else if (item.indexOf('col-xxl-') !== -1) {
+          colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
+        }
+      });
+
       if (!dom.hasClass(cell, colClass[11])) {
         //if not column full
         if (dom.hasClass(cell, colClass[11])) {
@@ -30976,7 +31130,7 @@ class Grid {
     }
 
     const rowClass = builder.opts.row;
-    const colClass = builder.opts.cols;
+    let colClass = builder.opts.cols;
     const colSizes = builder.opts.colsizes;
 
     if (rowClass !== '' && colClass.length > 0 && colSizes.length > 0) {
@@ -31031,6 +31185,21 @@ class Grid {
 
 
     if (rowClass !== '' && colClass.length > 0) {
+      // Bootstrap stuff
+      cell.classList.forEach(item => {
+        if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
+          colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
+        } else if (item.indexOf('col-xs-') !== -1) {
+          colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
+        } else if (item.indexOf('col-lg-') !== -1) {
+          colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
+        } else if (item.indexOf('col-xl-') !== -1) {
+          colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
+        } else if (item.indexOf('col-xxl-') !== -1) {
+          colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
+        }
+      });
+
       if (!dom.hasClass(cell, colClass[11])) {
         //if not column full
         if (dom.hasClass(cell, colClass[0])) {
@@ -84200,7 +84369,7 @@ class SaveImages {
 
 }
 
-const dom$1 = new Dom();
+const dom$1$1 = new Dom();
 
 class Tooltip {
   constructor(builder) {
@@ -84213,7 +84382,7 @@ class Tooltip {
 
     if (!tooltip) {
       let html = '<div class="is-tooltip"></div>';
-      dom$1.appendHtml(builderStuff, html);
+      dom$1$1.appendHtml(builderStuff, html);
       tooltip = builderStuff.querySelector('.is-tooltip');
     }
 
@@ -92322,6 +92491,794 @@ class ContentStuff {
 
 }
 
+// Experimental
+const dom$1 = new Dom$1();
+
+class AnimateScroll {
+  constructor(builder) {
+    this.builder = builder;
+    const builderStuff = this.builder.builderStuff;
+    this.builderStuff = builderStuff;
+    let html = `
+        <style>
+        .animatescroll.active {
+            right: 0;
+        }
+        .animatescroll .side-title {
+            font-weight: 400;
+            padding: 18px !important;
+            font-size: 15px;
+            opacity: 0.8;
+        }
+        .anim-controls {
+            padding: 0 !important;
+            z-index: 1;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            box-sizing: border-box;
+            border-top: transparent 60px solid !important;
+        }
+        #divAnimAdjust, #divAnimSettings {
+            border-top: transparent 65px solid !important;
+            padding: 0 10px 20px 18px !important;
+            height: 100%;
+            box-sizing: border-box;
+            overflow-y: auto;
+            overflow-x: hidden;
+            position: absolute;
+            top: 0; left: 0;
+        }
+        .anim-label {
+            padding: 15px 0 5px;
+            width: 100%;
+            flex:none;
+            display: flex;
+            justify-content: space-between;
+        }
+        .bold {
+            font-weight: 600;
+        }
+        .anim-controls button,
+        .anim-list button { 
+            height: 35px !important;
+            outline-offset: -2px !important;
+        }
+
+        .anim-controls input[type=text],
+        .anim-list input[type=text] {
+            font-size: 13px !important;
+            font-family: sans-serif !important;
+            font-weight: 300 !important;
+            padding: 0 !important;
+        }
+        .flex-wrap {
+            display: flex;
+            flex-flow: wrap;
+        }
+
+        .inp-slide-left,
+        .inp-slide-right,
+        .inp-slide-up,
+        .inp-slide-down,
+        .inp-scale,
+        .inp-rotate-clockwise,
+        .inp-rotate-counter {
+            width:65px !important;
+            height:35px !important;
+            text-align:center !important;
+            margin-left:10px !important;
+            font-size: 13px !important;
+            font-family: sans-serif !important;
+            font-weight: 300 !important;
+            padding: 0 !important;
+        }
+        </style>
+        <div class="is-side animatescroll" style="display: block;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+
+            <div class="side-title">${out('Scroll Animation')}</div>
+
+            <button tabindex="-1" title="Close" class="is-side-close" style="z-index:2;background:transparent;width:25px;height:25px;position:absolute;top:10px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;"><svg class="is-icon-flex" style="width:25px;height:25px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+        
+            <div class="anim-controls">
+
+                <div class="is-tabs clearfix" style="padding-top:18px;position:relative;z-index:1;" data-group="skrollanim">
+                    <a id="tabBoxGeneral" href="" data-content="divAnimAdjust" class="active">Animation</a>
+                    <a id="tabBoxContentContainer" href="" data-content="divAnimSettings">Settings</a>
+                </div>
+
+                <div id="divAnimAdjust" class="is-tab-content active" data-group="skrollanim" style="display:flex;padding-top:0">
+                    
+                    <div class="anim-label">${out('Target')}:</div>
+                    <div class="flex-wrap">
+                        <button title="" class="cmd-target on" data-command="target" data-value="element" style="width:80px">Element</button>
+                        <button title="" class="cmd-target" data-command="target" data-value="column" style="width:80px">Column</button>
+                        <button title="" class="cmd-target" data-command="target" data-value="row" style="width:80px">Row</button>
+                        <button title="" class="cmd-target" data-command="target" data-value="container" style="width:80px">Container</button>
+                    </div>
+
+                    <div class="anim-label">
+                        <span><span class="bold">Slide Left</span>: <input class="inp-slide-left" type="text" /></span> 
+                        <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-left"></use></svg>
+                    </div>
+                    <div class="flex-wrap">
+                        <button title="" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
+                        <button title="" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
+                        <button title="" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
+                        <button title="" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
+                        <button title="" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
+                    </div>
+                    <div class="anim-label">
+                        <span><span class="bold">Slide Right</span>: <input class="inp-slide-right" type="text" /></span> 
+                        <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-right"></use></svg>
+                    </div>
+                    <div class="flex-wrap">
+                        <button title="" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
+                        <button title="" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
+                        <button title="" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
+                        <button title="" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
+                        <button title="" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
+                    </div>
+
+                    <div class="anim-label">
+                        <span><span class="bold">Slide Up</span>: <input class="inp-slide-up" type="text" /></span> 
+                        <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-up"></use></svg>
+                    </div>
+                    <div class="flex-wrap">
+                        <button title="" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
+                        <button title="" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
+                        <button title="" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
+                        <button title="" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
+                        <button title="" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
+                    </div>
+                    <div class="anim-label">
+                        <span><span class="bold">Slide Down</span>: <input class="inp-slide-down" type="text" /></span> 
+                        <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-down"></use></svg>
+                    </div>
+                    <div class="flex-wrap">
+                        <button title="" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
+                        <button title="" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
+                        <button title="" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
+                        <button title="" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
+                        <button title="" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
+                    </div>
+
+                    <div class="anim-label">
+                        <span><span class="bold">Scale</span>: <input class="inp-scale" type="text" /></span> 
+                        <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>
+                    </div>
+                    <div class="flex-wrap">
+                        <button title="" class="cmd-scale" data-command="scale" data-value="0.8" style="width:60px">0.8</button>
+                        <button title="" class="cmd-scale" data-command="scale" data-value="0.9" style="width:60px">0.9</button>
+                        <button title="" class="cmd-scale" data-command="scale" data-value="1.1" style="width:60px">1.1</button>
+                        <button title="" class="cmd-scale" data-command="scale" data-value="1.2" style="width:60px">1.2</button>
+                        <button title="" class="cmd-scale" data-command="scale" data-value="2" style="width:60px">2</button>
+                    </div>
+
+                    <div class="anim-label">
+                        <span><span class="bold">Rotate Clockwise</span>: <input class="inp-rotate-clockwise" type="text" /></span> </span> 
+                        <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>
+                    </div>
+                    <div class="flex-wrap">
+                        <button title="" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
+                        <button title="" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
+                        <button title="" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
+                        <button title="" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
+                        <button title="" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
+                    </div>
+                    <div class="anim-label">
+                        <span><span class="bold">Rotate Counterclockwise</span>: <input class="inp-rotate-counter" type="text" /></span> </span> 
+                        <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>
+                    </div>
+                    <div class="flex-wrap">
+                        <button title="" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
+                        <button title="" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
+                        <button title="" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
+                        <button title="" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
+                        <button title="" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
+                    </div>
+                    <div class="anim-label"><span class="bold">Fade</span> <svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-circle-half"></use></svg></div>
+                    <button title="" class="cmd-fade" data-command="fade" data-value="in" style="width:125px">Fade In</button>
+                    <br>
+                    <button title="" class="cmd-clear-scrollanim" style="width:195px">
+                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg> 
+                    <span style="margin-left:7px">Clear Animation</span></button>
+                </div>
+
+                <div id="divAnimSettings" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
+                    
+                    <div class="anim-label">${out('Start')}:</div>
+                    <div class="flex-wrap">
+                        <button title="" class="cmd-start on" data-command="start" data-value="data-bottom-top" style="width:80px">Normal</button>
+                        <button title="" class="cmd-start" data-command="start" data-value="data-400-bottom" style="width:80px">Delayed</button>
+                        <button title="" class="cmd-start" data-command="start" data-value="data-200-bottom" style="width:80px">Late</button>
+                        <button title="" class="cmd-start" data-command="start" data-value="data--50-bottom" style="width:95px">Very Late</button>
+                    </div>
+                    
+                    <div class="anim-label">${out('End')}:</div>
+                    <div class="flex-wrap">
+                        <button title="" class="cmd-end" data-command="end" data-value="data-bottom" style="width:95px">Very Soon</button>
+                        <button title="" class="cmd-end" data-command="end" data-value="data-center-top" style="width:80px">Soon</button>
+                        <button title="" class="cmd-end on" data-command="end" data-value="data-center" style="width:80px">Normal</button>
+                        <!--<button title="" class="cmd-end" data-command="end" data-value="data-top-bottom" style="width:80px">Late</button>-->
+                    </div>
+
+
+                </div>
+
+        
+            </div>
+
+            <div class="dummy-elm"></div>
+
+        </div>
+        `;
+    dom$1.appendHtml(builderStuff, html);
+    let modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
+    this.modalAnimateScroll = modalAnimateScroll;
+    const btnClose = modalAnimateScroll.querySelector('.is-side-close');
+    btnClose.addEventListener('click', () => {
+      this.close();
+    }); // Target
+
+    let btns = modalAnimateScroll.querySelectorAll('.cmd-target');
+    btns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let elms = modalAnimateScroll.querySelectorAll('.cmd-target');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+        this.read();
+      });
+    }); // Start
+
+    btns = modalAnimateScroll.querySelectorAll('.cmd-start');
+    btns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let elms = modalAnimateScroll.querySelectorAll('.cmd-start');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+        this.apply();
+      });
+    }); // End
+
+    btns = modalAnimateScroll.querySelectorAll('.cmd-end');
+    btns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let elms = modalAnimateScroll.querySelectorAll('.cmd-end');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+        this.apply();
+      });
+    }); // Slide X
+
+    btns = modalAnimateScroll.querySelectorAll('.cmd-slidex');
+    btns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const inpSlideLeft = modalAnimateScroll.querySelector('.inp-slide-right');
+        const inpSlideRight = modalAnimateScroll.querySelector('.inp-slide-left');
+
+        if (btn.classList.contains('on')) {
+          btn.classList.remove('on');
+          inpSlideLeft.value = '';
+          inpSlideRight.value = '';
+          this.apply();
+          return;
+        }
+
+        let elms = modalAnimateScroll.querySelectorAll('.cmd-slidex');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+
+        if (btn.getAttribute('data-value').indexOf('-') !== -1) {
+          inpSlideLeft.value = btn.getAttribute('data-value').replace('-', '');
+          inpSlideRight.value = '';
+        } else {
+          inpSlideRight.value = btn.getAttribute('data-value');
+          inpSlideLeft.value = '';
+        }
+
+        this.apply();
+      });
+    });
+    const inpSlideLeft = modalAnimateScroll.querySelector('.inp-slide-right');
+    const inpSlideRight = modalAnimateScroll.querySelector('.inp-slide-left');
+    inpSlideLeft.addEventListener('change', () => {
+      let elms = modalAnimateScroll.querySelectorAll('.cmd-slidex');
+      elms.forEach(elm => {
+        elm.classList.remove('on');
+      });
+      inpSlideRight.value = '';
+      this.apply();
+      let btn = this.modalAnimateScroll.querySelector(`.cmd-slidex[data-value="-${inpSlideLeft.value}"]`);
+      if (btn) btn.classList.add('on');
+    });
+    inpSlideRight.addEventListener('change', () => {
+      let elms = modalAnimateScroll.querySelectorAll('.cmd-slidex');
+      elms.forEach(elm => {
+        elm.classList.remove('on');
+      });
+      inpSlideLeft.value = '';
+      this.apply();
+      let btn = this.modalAnimateScroll.querySelector(`.cmd-slidex[data-value="${inpSlideRight.value}"]`);
+      if (btn) btn.classList.add('on');
+    }); // Slide Y
+
+    btns = modalAnimateScroll.querySelectorAll('.cmd-slidey');
+    btns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const inpSlideUp = modalAnimateScroll.querySelector('.inp-slide-up');
+        const inpSlideDown = modalAnimateScroll.querySelector('.inp-slide-down');
+
+        if (btn.classList.contains('on')) {
+          btn.classList.remove('on');
+          inpSlideUp.value = '';
+          inpSlideDown.value = '';
+          this.apply();
+          return;
+        }
+
+        let elms = modalAnimateScroll.querySelectorAll('.cmd-slidey');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+
+        if (btn.getAttribute('data-value').indexOf('-') !== -1) {
+          inpSlideDown.value = btn.getAttribute('data-value').replace('-', '');
+          inpSlideUp.value = '';
+        } else {
+          inpSlideUp.value = btn.getAttribute('data-value');
+          inpSlideDown.value = '';
+        }
+
+        this.apply();
+      });
+    });
+    const inpSlideUp = modalAnimateScroll.querySelector('.inp-slide-up');
+    const inpSlideDown = modalAnimateScroll.querySelector('.inp-slide-down');
+    inpSlideDown.addEventListener('change', () => {
+      let elms = modalAnimateScroll.querySelectorAll('.cmd-slidey');
+      elms.forEach(elm => {
+        elm.classList.remove('on');
+      });
+      inpSlideUp.value = '';
+      this.apply();
+      let btn = this.modalAnimateScroll.querySelector(`.cmd-slidey[data-value="-${inpSlideDown.value}"]`);
+      if (btn) btn.classList.add('on');
+    });
+    inpSlideUp.addEventListener('change', () => {
+      let elms = modalAnimateScroll.querySelectorAll('.cmd-slidey');
+      elms.forEach(elm => {
+        elm.classList.remove('on');
+      });
+      inpSlideDown.value = '';
+      this.apply();
+      let btn = this.modalAnimateScroll.querySelector(`.cmd-slidey[data-value="${inpSlideUp.value}"]`);
+      if (btn) btn.classList.add('on');
+    }); // Scale
+
+    btns = modalAnimateScroll.querySelectorAll('.cmd-scale');
+    btns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const inpScale = modalAnimateScroll.querySelector('.inp-scale');
+
+        if (btn.classList.contains('on')) {
+          btn.classList.remove('on');
+          inpScale.value = '';
+          this.apply();
+          return;
+        }
+
+        let elms = modalAnimateScroll.querySelectorAll('.cmd-scale');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+        inpScale.value = btn.getAttribute('data-value');
+        this.apply();
+      });
+    });
+    const inpScale = modalAnimateScroll.querySelector('.inp-scale');
+    inpScale.addEventListener('change', () => {
+      let elms = modalAnimateScroll.querySelectorAll('.cmd-scale');
+      elms.forEach(elm => {
+        elm.classList.remove('on');
+      });
+      this.apply();
+      let btn = this.modalAnimateScroll.querySelector(`.cmd-scale[data-value="${inpScale.value}"]`);
+      if (btn) btn.classList.add('on');
+    }); // Rotate
+
+    btns = modalAnimateScroll.querySelectorAll('.cmd-rotate');
+    btns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const inpRotateClockwise = modalAnimateScroll.querySelector('.inp-rotate-clockwise');
+        const inpRotateCounter = modalAnimateScroll.querySelector('.inp-rotate-counter');
+
+        if (btn.classList.contains('on')) {
+          btn.classList.remove('on');
+          inpRotateClockwise.value = '';
+          inpRotateCounter.value = '';
+          this.apply();
+          return;
+        }
+
+        let elms = modalAnimateScroll.querySelectorAll('.cmd-rotate');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+
+        if (btn.getAttribute('data-value').indexOf('-') !== -1) {
+          inpRotateClockwise.value = btn.getAttribute('data-value').replace('-', '');
+          inpRotateCounter.value = '';
+        } else {
+          inpRotateCounter.value = btn.getAttribute('data-value');
+          inpRotateClockwise.value = '';
+        }
+
+        this.apply();
+      });
+    });
+    const inpRotateClockwise = modalAnimateScroll.querySelector('.inp-rotate-clockwise');
+    const inpRotateCounter = modalAnimateScroll.querySelector('.inp-rotate-counter');
+    inpRotateClockwise.addEventListener('change', () => {
+      let elms = modalAnimateScroll.querySelectorAll('.cmd-rotate');
+      elms.forEach(elm => {
+        elm.classList.remove('on');
+      });
+      inpRotateCounter.value = '';
+      this.apply();
+      let btn = this.modalAnimateScroll.querySelector(`.cmd-rotate[data-value="-${inpRotateClockwise.value}"]`);
+      if (btn) btn.classList.add('on');
+    });
+    inpRotateCounter.addEventListener('change', () => {
+      let elms = modalAnimateScroll.querySelectorAll('.cmd-rotate');
+      elms.forEach(elm => {
+        elm.classList.remove('on');
+      });
+      inpRotateClockwise.value = '';
+      this.apply();
+      let btn = this.modalAnimateScroll.querySelector(`.cmd-rotate[data-value="${inpRotateCounter.value}"]`);
+      if (btn) btn.classList.add('on');
+    }); // Fade
+
+    let btnFade = modalAnimateScroll.querySelector('.cmd-fade');
+    btnFade.addEventListener('click', () => {
+      if (btnFade.classList.contains('on')) {
+        btnFade.classList.remove('on');
+      } else {
+        btnFade.classList.add('on');
+      }
+
+      this.apply();
+    }); // Clear
+
+    let btnClear = modalAnimateScroll.querySelector('.cmd-clear-scrollanim');
+    btnClear.addEventListener('click', () => {
+      let activeElement;
+      let target = this.getTarget();
+      activeElement = target.element;
+      if (!activeElement) return;
+      this.builder.editor.saveForUndo();
+      this.unselectSettings();
+      this.cleanup(activeElement);
+      activeElement.style.transform = '';
+      activeElement.style.opacity = '';
+
+      if (this.builder.win.skrollrr) {
+        this.builder.win.skrollrr.refresh();
+      } //Trigger Change event
+
+
+      this.builder.settings.onChange();
+    }); //Extend onContentClick 
+
+    let old = this.builder.settings.onContentClick;
+
+    this.builder.settings.onContentClick = () => {
+      if (old) old.call(this); // call user's defined onRender
+
+      setTimeout(() => {
+        this.read();
+      }, 30);
+    };
+  }
+
+  unselectSettings() {
+    let elms = this.modalAnimateScroll.querySelectorAll('.cmd-slidex');
+    elms.forEach(elm => {
+      elm.classList.remove('on');
+    });
+    elms = this.modalAnimateScroll.querySelectorAll('.cmd-slidey');
+    elms.forEach(elm => {
+      elm.classList.remove('on');
+    });
+    elms = this.modalAnimateScroll.querySelectorAll('.cmd-scale');
+    elms.forEach(elm => {
+      elm.classList.remove('on');
+    });
+    elms = this.modalAnimateScroll.querySelectorAll('.cmd-rotate');
+    elms.forEach(elm => {
+      elm.classList.remove('on');
+    });
+    let btn = this.modalAnimateScroll.querySelector('.cmd-fade');
+    btn.classList.remove('on');
+  }
+
+  read() {
+    // clear
+    this.unselectSettings();
+    let activeElement;
+    let target = this.getTarget();
+    activeElement = target.element;
+    if (!activeElement) return; // console.log(activeElement)
+    // start
+
+    let css1 = activeElement.getAttribute('data-bottom-top');
+    if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
+    if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
+    if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // end
+
+    let css2 = activeElement.getAttribute('data-bottom');
+    if (!css2) css2 = activeElement.getAttribute('data-center-top');
+    if (!css2) css2 = activeElement.getAttribute('data-center'); // if(!css2) css2 = activeElement.getAttribute('data-top-bottom');
+
+    let dummyElm = document.querySelector('.dummy-elm');
+    dummyElm.style.cssText = css1;
+    let transform = this.getTransform(dummyElm, css1); // console.log(transform);
+
+    let btn = this.modalAnimateScroll.querySelector(`.cmd-slidex[data-value="${transform.translateX}"]`);
+    if (btn) btn.classList.add('on');
+    btn = this.modalAnimateScroll.querySelector(`.cmd-slidey[data-value="${transform.translateY}"]`);
+    if (btn) btn.classList.add('on');
+    btn = this.modalAnimateScroll.querySelector(`.cmd-scale[data-value="${transform.scale}"]`);
+    if (btn) btn.classList.add('on');
+
+    if (transform.rotate) {
+      btn = this.modalAnimateScroll.querySelector(`.cmd-rotate[data-value="${transform.rotate}"]`);
+      if (btn) btn.classList.add('on');
+    }
+
+    const inpSlideLeft = this.modalAnimateScroll.querySelector('.inp-slide-right');
+    const inpSlideRight = this.modalAnimateScroll.querySelector('.inp-slide-left');
+    inpSlideLeft.value = '';
+    inpSlideRight.value = '';
+
+    if (transform.translateX) {
+      if (transform.translateX.indexOf('-') !== -1) {
+        inpSlideLeft.value = transform.translateX.replace('-', '');
+      } else {
+        inpSlideRight.value = transform.translateX;
+      }
+    }
+
+    const inpSlideUp = this.modalAnimateScroll.querySelector('.inp-slide-up');
+    const inpSlideDown = this.modalAnimateScroll.querySelector('.inp-slide-down');
+    inpSlideUp.value = '';
+    inpSlideDown.value = '';
+
+    if (transform.translateY) {
+      if (transform.translateY.indexOf('-') !== -1) {
+        inpSlideDown.value = transform.translateY.replace('-', '');
+      } else {
+        inpSlideUp.value = transform.translateY;
+      }
+    }
+
+    const inpScale = this.modalAnimateScroll.querySelector('.inp-scale');
+    inpScale.value = '';
+
+    if (transform.scale) {
+      inpScale.value = transform.scale;
+    }
+
+    const inpRotateCounter = this.modalAnimateScroll.querySelector('.inp-rotate-counter');
+    const inpRotateClockwise = this.modalAnimateScroll.querySelector('.inp-rotate-clockwise');
+    inpRotateCounter.value = '';
+    inpRotateClockwise.value = '';
+
+    if (transform.rotate) {
+      if (transform.rotate.indexOf('-') !== -1) {
+        inpRotateClockwise.value = transform.rotate.replace('-', '');
+      } else {
+        inpRotateCounter.value = transform.rotate;
+      }
+    }
+
+    if (transform.opacity) {
+      btn = this.modalAnimateScroll.querySelector('.cmd-fade');
+      if (btn) btn.classList.add('on');
+    }
+  }
+
+  apply() {
+    let activeElement;
+    let target = this.getTarget();
+    activeElement = target.element;
+    if (!activeElement) return;
+    let valX;
+    let elms = this.modalAnimateScroll.querySelectorAll('.cmd-slidex');
+    elms.forEach(elm => {
+      if (elm.classList.contains('on')) {
+        valX = elm.getAttribute('data-value');
+      }
+    });
+    let valY;
+    elms = this.modalAnimateScroll.querySelectorAll('.cmd-slidey');
+    elms.forEach(elm => {
+      if (elm.classList.contains('on')) {
+        valY = elm.getAttribute('data-value');
+      }
+    });
+    let scale;
+    elms = this.modalAnimateScroll.querySelectorAll('.cmd-scale');
+    elms.forEach(elm => {
+      if (elm.classList.contains('on')) {
+        scale = elm.getAttribute('data-value');
+      }
+    });
+    let rotate;
+    elms = this.modalAnimateScroll.querySelectorAll('.cmd-rotate');
+    elms.forEach(elm => {
+      if (elm.classList.contains('on')) {
+        rotate = elm.getAttribute('data-value');
+      }
+    });
+    let fade = false;
+    let elm = this.modalAnimateScroll.querySelector('.cmd-fade');
+
+    if (elm.classList.contains('on')) {
+      fade = true;
+    }
+
+    const inpSlideLeft = this.modalAnimateScroll.querySelector('.inp-slide-right');
+    if (inpSlideLeft.value !== '') valX = '-' + inpSlideLeft.value;
+    const inpSlideRight = this.modalAnimateScroll.querySelector('.inp-slide-left');
+    if (inpSlideRight.value !== '') valX = inpSlideRight.value;
+    const inpSlideDown = this.modalAnimateScroll.querySelector('.inp-slide-down');
+    if (inpSlideDown.value !== '') valY = '-' + inpSlideDown.value;
+    const inpSlideUp = this.modalAnimateScroll.querySelector('.inp-slide-up');
+    if (inpSlideUp.value !== '') valY = inpSlideUp.value;
+    const inpScale = this.modalAnimateScroll.querySelector('.inp-scale');
+    if (inpScale.value !== '') scale = inpScale.value;
+    const inpRotateClockwise = this.modalAnimateScroll.querySelector('.inp-rotate-clockwise');
+    if (inpRotateClockwise.value !== '') rotate = '-' + inpRotateClockwise.value;
+    const inpRotateCounter = this.modalAnimateScroll.querySelector('.inp-rotate-counter');
+    if (inpRotateCounter.value !== '') rotate = inpRotateCounter.value;
+    let animStart = (valX ? ` translateX(${valX})` : '') + (valY ? ` translateY(${valY})` : '') + (rotate ? ` rotate(${rotate}deg)` : '') + (scale ? ` scale(${scale})` : '');
+    animStart = animStart.trim();
+    let animEnd = (valX ? ' translateX(0px)' : '') + (valY ? ' translateY(0px)' : '') + (rotate ? ' rotate(0deg)' : '') + (scale ? ' scale(1)' : '');
+    animEnd = animEnd.trim();
+    let sStart = (animStart ? 'transform: ' + animStart + ';' : '') + (fade ? 'opacity: 0;' : '');
+    let sEnd = (animEnd ? 'transform: ' + animEnd + ';' : '') + (fade ? 'opacity: 1;' : '');
+    this.builder.editor.saveForUndo();
+    this.cleanup(activeElement);
+    let dataStart;
+    let dataEnd;
+    elms = this.modalAnimateScroll.querySelectorAll('.cmd-start');
+    elms.forEach(elm => {
+      if (elm.classList.contains('on')) {
+        dataStart = elm.getAttribute('data-value');
+      }
+    });
+    elms = this.modalAnimateScroll.querySelectorAll('.cmd-end');
+    elms.forEach(elm => {
+      if (elm.classList.contains('on')) {
+        dataEnd = elm.getAttribute('data-value');
+      }
+    });
+    if (sStart !== '') activeElement.setAttribute(dataStart, sStart);
+    if (sEnd !== '') activeElement.setAttribute(dataEnd, sEnd);
+
+    if (this.builder.win.skrollrr) {
+      this.builder.win.skrollrr.refresh();
+    } //Trigger Change event
+
+
+    this.builder.settings.onChange();
+  }
+
+  getTarget() {
+    let target;
+    let elms = this.modalAnimateScroll.querySelectorAll('.cmd-target');
+    elms.forEach(elm => {
+      if (elm.classList.contains('on')) {
+        target = elm.getAttribute('data-value');
+      }
+    });
+    let activeElement;
+
+    if (target === 'element') {
+      activeElement = this.builder.editor.activeElement;
+    }
+
+    if (target === 'column') {
+      activeElement = this.builder.editor.activeCol;
+    }
+
+    if (target === 'row') {
+      let activeCol = this.builder.editor.activeCol;
+      if (activeCol) activeElement = activeCol.parentNode;
+    }
+
+    if (target === 'container') {
+      let activeCol = this.builder.editor.activeCol;
+      if (activeCol) activeElement = activeCol.parentNode.parentNode;
+    }
+
+    return {
+      'element': activeElement ? activeElement : false,
+      'name': target ? target : false
+    };
+  }
+
+  getTransform(element, css) {
+    let tX, tY, sc, rt;
+    let arrTransform = this.parseComplexStyleProperty(css);
+    if (arrTransform.translateX) tX = arrTransform.translateX[0];
+    if (arrTransform.translateY) tY = arrTransform.translateY[0];
+    if (arrTransform.scale) sc = arrTransform.scale[0];
+    if (arrTransform.rotate) rt = arrTransform.rotate[0];
+    let opacity = element.style.opacity;
+    return {
+      translateX: tX ? tX : false,
+      translateY: tY ? tY : false,
+      scale: sc ? sc : false,
+      rotate: rt ? rt.replace('deg', '') : false,
+      opacity: opacity ? opacity : false
+    };
+  }
+
+  parseComplexStyleProperty(str) {
+    var regex = /(\w+)\((.+?)\)/g,
+        transform = {},
+        match;
+
+    while (match === regex.exec(str)) transform[match[1]] = transform[match[1]] ? transform[match[1]].concat([match[2]]) : [match[2]];
+
+    return transform;
+  }
+
+  cleanup(elm) {
+    elm.removeAttribute('data-center');
+    elm.removeAttribute('data-center-top');
+    elm.removeAttribute('data-top');
+    elm.removeAttribute('data-top-bottom');
+    elm.removeAttribute('data--50-bottom');
+    elm.removeAttribute('data--100-bottom');
+    elm.removeAttribute('data--150-bottom');
+    elm.removeAttribute('data--200-bottom');
+    elm.removeAttribute('data--300-bottom');
+    elm.removeAttribute('data--400-bottom');
+    elm.removeAttribute('data-bottom-top');
+    elm.removeAttribute('data-400-bottom');
+    elm.removeAttribute('data-300-bottom');
+    elm.removeAttribute('data-200-bottom');
+    elm.removeAttribute('data-150-bottom');
+    elm.removeAttribute('data-100-bottom');
+    elm.removeAttribute('data-50-bottom');
+    elm.removeAttribute('data-bottom');
+  }
+
+  edit() {
+    this.modalAnimateScroll.classList.add('active');
+  }
+
+  close() {
+    this.modalAnimateScroll.classList.remove('active');
+  }
+
+}
+
 const dom = new Dom$1();
 
 class ContentBox {
@@ -94954,10 +95911,16 @@ class ContentBox {
       builderStuff = document.querySelector('#_cbhtml');
     }
 
-    this.builderStuff = builderStuff;
+    this.builderStuff = builderStuff; // a hack to prevent html/body page get sliding
+
+    builderStuff.style.position = 'fixed';
+    setTimeout(() => {
+      builderStuff.style.position = '';
+    }, 1200);
     prepareSvgIcons$1(this); // Prepare icons (embed svg definitions for icons) 
 
     this.sidebar = new SideBar(this);
+    this.animateScroll = new AnimateScroll(this);
 
     if (!window.data_basic) {
       dom.addExternalScripts([this.snippetUrl], () => {
@@ -96520,6 +97483,10 @@ class ContentBox {
     this.editor.viewZoom();
   }
 
+  openAnimateScroll() {
+    this.animateScroll.edit();
+  }
+
   destroy() {
     this.doc.removeEventListener('click', this.doDocumentClick, false);
     if (this.iframe) document.removeEventListener('click', this.doDocumentClick, false);