@innovastudio/contentbox 1.4.50 → 1.4.53

package/public/contentbox/contentbox.esm.js

@@ -465,6 +465,19 @@ const prepareSvgIcons$1 = builder => {
                 <path d="M20 4v5h-5"></path>
             </symbol>
 
+            <symbol id="icon-device-mobile" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <rect x="6" y="3" width="12" height="18" rx="2"></rect>
+                <line x1="11" y1="4" x2="13" y2="4"></line>
+                <line x1="12" y1="17" x2="12" y2="17.01"></line>
+            </symbol>
+
+            <symbol id="icon-device-laptop" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <line x1="3" y1="19" x2="21" y2="19"></line>
+                <rect x="5" y="6" width="14" height="10" rx="1"></rect>
+            </symbol>
+
             </defs>
         </svg>`;
   const builderStuff = builder.builderStuff;
@@ -1772,6 +1785,11 @@ class SideBar {
 
         const framework =  '${this.builder.framework}'; 
         const contentStylePath = '${this.builder.contentStylePath}'; 
+
+        const row = '${this.builder.row}'; 
+        const cols = [${this.builder.cols.map(item => {
+      return `'${item}'`;
+    })}];
         
         let templates = [
             ${sTemplates}
@@ -1932,6 +1950,27 @@ class SideBar {
                             html = html.replace(new RegExp('btn btn-primary', 'g'), 'mdl-button mdl-js-button mdl-button--raised mdl-button--accent');
                             html = html.replace(new RegExp('btn btn-default', 'g'), 'mdl-button mdl-js-button mdl-button--raised');
                         }
+
+                        if(framework ==='') {
+                            // Convert snippet into your defined 12 columns grid   
+                            var rowClass = row;
+                            var colClass = cols;
+                            if(rowClass!=='' && colClass.length===12){
+                                html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
+                                html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
+                                
+                                html = html.replace(new RegExp('column full', 'g'), colClass[11]);
+                                html = html.replace(new RegExp('column half', 'g'), colClass[5]);
+                                html = html.replace(new RegExp('column third', 'g'), colClass[3]);
+                                html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
+                                html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
+                                html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
+                                html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
+                                html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
+                                html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
+                                html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
+                            }
+                        }
         
                         html = html.replace(/{id}/g, makeid());
 
@@ -28569,17 +28608,19 @@ class HtmlUtil {
 
     if (this.builder.cleanHtmlFormatting) ;
 
-    const util = this.builder.util;
-    const builderStuff = this.builder.builderStuff; //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
-
-    let elm = builderStuff.querySelector('#tmp_content');
-    if (elm) builderStuff.removeChild(elm);
-    elm = builderStuff.querySelector('#tmp_buildercontent');
-    if (elm) builderStuff.removeChild(elm);
-    let html = `<div id="tmp_content" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>
-            <div id="tmp_buildercontent" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>`;
-    dom$h.appendHtml(builderStuff, html);
-    let tmp = builderStuff.querySelector('#tmp_content');
+    const util = this.builder.util; // const builderStuff = this.builder.builderStuff;
+    // //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
+    // let elm = builderStuff.querySelector('#tmp_content');
+    // if(elm) builderStuff.removeChild(elm);
+    // elm = builderStuff.querySelector('#tmp_buildercontent');
+    // if(elm) builderStuff.removeChild(elm);
+    // let html = `<div id="tmp_content" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>
+    //     <div id="tmp_buildercontent" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>`;
+    // dom.appendHtml(builderStuff, html);
+
+    let html; // let tmp = builderStuff.querySelector('#tmp_content');
+
+    let tmp = document.createElement('div');
     tmp.innerHTML = content.innerHTML; //Find subblocks (previously is-builder) in custom code blocks and save them to data-html-1, data-html-2, and so on.
 
     let blocks = tmp.querySelectorAll('[data-html]');
@@ -28592,76 +28633,6 @@ class HtmlUtil {
         block.setAttribute('data-html-' + index, encodeURIComponent(html));
         index++;
       });
-      /* OLD
-      let index = 1;
-      //let _builders = block.querySelectorAll('.is-builder');
-      Array.prototype.forEach.call(_builders, (_builder) => {
-          // let builderhtml = _builder.innerHTML;
-           //if(dom.parentsHasClass(_builder, 'slick-cloned')) return; // direct LATER
-           //Cleaning
-          _builder.style.transform = '';
-          _builder.style.WebkitTransform= '';
-          _builder.style.MozTransform= '';
-          _builder.removeAttribute('data-sort');
-          dom.removeClass(_builder, 'builder-active');
-           _builder.removeAttribute('hidesnippetaddtool');
-          _builder.removeAttribute('gray');
-          _builder.removeAttribute('rowoutline');
-          _builder.removeAttribute('grayoutline');
-          _builder.removeAttribute('hideoutline');
-          _builder.removeAttribute('leftrowtool');
-          _builder.removeAttribute('minimal');
-          _builder.removeAttribute('clean');
-          _builder.removeAttribute('grideditor');
-          _builder.removeAttribute('gridoutline');
-           _builder.removeAttribute('gridoutline'); // old
-          _builder.removeAttribute('draggridoutline'); // old
-          _builder.removeAttribute('between-blocks-left'); // old
-          _builder.removeAttribute('between-blocks-center'); // old  
-          _builder.removeAttribute('hideelementhighlight'); 
-           let builderhtml = _builder.innerHTML;
-          let tmpbuilder = builderStuff.querySelector('#tmp_buildercontent');
-          tmpbuilder.innerHTML = builderhtml;
-           let elms = tmp.querySelectorAll('.sortable-chosen');
-          dom.removeClasses(elms, 'sortable-chosen');
-          elms = tmp.querySelectorAll('.sortable-ghost');
-          dom.removeClasses(elms, 'sortable-ghost');
-          elms = tmpbuilder.querySelectorAll('.elm-active');
-          dom.removeClasses(elms, 'elm-active');
-          elms = tmpbuilder.querySelectorAll('.elm-inspected');
-          dom.removeClasses(elms, 'elm-inspected');
-          elms = tmpbuilder.querySelectorAll('.cell-active');
-          dom.removeClasses(elms, 'cell-active');
-          elms = tmpbuilder.querySelectorAll('.row-active');
-          dom.removeClasses(elms, 'row-active');
-          elms = tmpbuilder.querySelectorAll('.row-outline');
-          dom.removeClasses(elms, 'row-outline');
-          //elms = tmpbuilder.querySelectorAll('.is-builder');
-          //dom.removeClasses(elms, 'is-builder');
-          elms = tmpbuilder.querySelectorAll('.row-outline');
-          dom.removeClasses(elms, 'row-outline');
-          elms = tmpbuilder.querySelectorAll('[data-click]');
-          dom.removeAttributes(elms, 'data-click');
-          elms = tmpbuilder.querySelectorAll('[contenteditable]');
-          dom.removeAttributes(elms, 'contenteditable');
-          elms = tmpbuilder.querySelectorAll('[data-module-active]');
-          dom.removeAttributes(elms, 'data-module-active');
-           dom.removeElements( tmpbuilder.querySelectorAll('.is-row-tool') );
-          dom.removeElements( tmpbuilder.querySelectorAll('.is-rowadd-tool') );
-          dom.removeElements( tmpbuilder.querySelectorAll('.ovl') );
-          dom.removeElements( tmpbuilder.querySelectorAll('.irow-add-initial') );
-           // LATER: rewrite in javascript
-          //$builder.find('*[class=""]').removeAttr('class');
-          //$builder.find('*[style=""]').removeAttr('style'); 
-           elms = tmpbuilder.querySelectorAll('[data-keep]');
-          dom.removeAttributes(elms, 'data-keep');
-           builderhtml = tmpbuilder.innerHTML.trim();
-          builderhtml = builderhtml.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
-      
-          block.setAttribute('data-html-' + index, encodeURIComponent(builderhtml));
-                   index++;
-      });
-      */
     }); //Render custom code blocks (including any editable areas within)
 
     blocks = tmp.querySelectorAll('[data-html]');
@@ -28958,12 +28929,12 @@ class HtmlUtil {
       });
       html = tmp.innerHTML.trim();
       html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
-    }
+    } // elm = builderStuff.querySelector('#tmp_content');
+    // if(elm) builderStuff.removeChild(elm);
+    // elm = builderStuff.querySelector('#tmp_buildercontent');
+    // if(elm) builderStuff.removeChild(elm);
+    // return html;
 
-    elm = builderStuff.querySelector('#tmp_content');
-    if (elm) builderStuff.removeChild(elm);
-    elm = builderStuff.querySelector('#tmp_buildercontent');
-    if (elm) builderStuff.removeChild(elm); // return html;
 
     let beautify = JsBeautify.html;
     html = beautify(html); // https://stackoverflow.com/questions/22962220/remove-multiple-line-breaks-n-in-javascript
@@ -63637,6 +63608,10 @@ class Image$1 {
           } else {
             preview.style.height = maxH + 'px';
           }
+        }
+
+        if (window.innerHeight <= 800) {
+          preview.style.height = '350px';
         } // imagePreview.src = img.src;
 
 
@@ -64274,7 +64249,14 @@ class ButtonEditor {
                         <a title="${util.out('Saved')}" href="" data-content="divMyButtons">${util.out('Saved')}</a>
                         <a title="${util.out('Templates')}" href="" data-content="divButtonTemplates">${util.out('Templates')}</a>
                     </div>
-                    <div id="divButtonGeneral" class="is-tab-content active" tabindex="-1" data-group="button" style="display:block">
+                    <div id="divButtonGeneral" class="is-tab-content active" tabindex="-1" data-group="button" style="display: flex;
+                        height: 100%;
+                        width:100%;
+                        overflow-y: auto;
+                        position: absolute;
+                        border-top: 82px solid transparent;
+                        box-sizing: border-box;
+                        top: 0px;">
 
                         <div class="flex flex-row">
                             <div class="flex flex-col" style="margin-right: 40px;">
@@ -64324,7 +64306,7 @@ class ButtonEditor {
                                 <div>
                                     <label>${util.out('Padding X')}</label>:
                                 </div>
-                                <div class="flex flex-row flex-wrap" style="margin-top:5px">
+                                <div class="flex flex-row" style="margin-top:5px">
                                     <button title="2" data-command="2" class="paddingx-command" style="margin-right:4px">2</button>
                                     <button title="3" data-command="3" class="paddingx-command" style="margin-right:4px">3</button>
                                     <button title="4" data-command="4" class="paddingx-command" style="margin-right:4px">4</button>
@@ -64340,7 +64322,7 @@ class ButtonEditor {
                                 <div>
                                     <label>${util.out('Padding Y')}</label>:
                                 </div>
-                                <div class="flex flex-row flex-wrap" style="margin-top:5px">
+                                <div class="flex flex-row" style="margin-top:5px">
                                     <button title="0" data-command="0" class="paddingy-command" style="margin-right:4px">0</button>
                                     <button title="1" data-command="1" class="paddingy-command" style="margin-right:4px">1</button>
                                     <button title="2" data-command="2" class="paddingy-command" style="margin-right:4px">2</button>
@@ -66656,8 +66638,7 @@ class Spacer {
           this.showTool(spacer); //Trigger Change event
 
           this.builder.opts.onChange(); //Trigger Render event
-
-          this.builder.opts.onRender();
+          // this.builder.opts.onRender();
         });
       });
     }
@@ -79424,7 +79405,7 @@ class Preferences {
 
 }
 
-const dom$2 = new Dom();
+const dom$2$1 = new Dom();
 
 class ColorClassPicker {
   constructor(opts = {}, mode) {
@@ -79564,7 +79545,7 @@ class ColorClassPicker {
     this.showColorGradient('gray');
     let btns = document.querySelectorAll('.base-color');
     Array.prototype.forEach.call(btns, btn => {
-      dom$2.addEventListener(btn, 'click', () => {
+      dom$2$1.addEventListener(btn, 'click', () => {
         const base = btn.getAttribute('data-base');
         this.showColorGradient(base);
         let val = btn.getAttribute('data-value');
@@ -79574,7 +79555,7 @@ class ColorClassPicker {
     });
     btns = document.querySelectorAll('.quick-color');
     Array.prototype.forEach.call(btns, btn => {
-      dom$2.addEventListener(btn, 'click', e => {
+      dom$2$1.addEventListener(btn, 'click', e => {
         e.preventDefault();
         let val = btn.getAttribute('data-value');
         if (this.mode === 'text') val = val.replace('bg-', 'text-');
@@ -79598,7 +79579,7 @@ class ColorClassPicker {
     divDetails.innerHTML = s;
     const btns = document.querySelectorAll('.detail-color');
     Array.prototype.forEach.call(btns, btn => {
-      dom$2.addEventListener(btn, 'click', () => {
+      dom$2$1.addEventListener(btn, 'click', () => {
         let val = btn.getAttribute('data-value');
         if (this.mode === 'text') val = val.replace('bg-', 'text-');
         this.opts.onPick(val);
@@ -93465,8 +93446,7 @@ class ContentStuff {
 
 }
 
-// Experimental
-const dom$1 = new Dom$1();
+const dom$2 = new Dom$1();
 
 class AnimateScroll {
   constructor(builder) {
@@ -94542,7 +94522,7 @@ class AnimateScroll {
 
         </div>
         `;
-    dom$1.appendHtml(builderStuff, html);
+    dom$2.appendHtml(builderStuff, html);
     const modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
     this.modalAnimateScroll = modalAnimateScroll;
     const divEnterAnim = modalAnimateScroll.querySelector('#divEnterAnim');
@@ -97810,6 +97790,2002 @@ class AnimateScroll {
 
 }
 
+const dom$1 = new Dom$1();
+
+class Timeline {
+  constructor(builder) {
+    this.builder = builder;
+    const builderStuff = this.builder.builderStuff;
+    this.builderStuff = builderStuff;
+    let html = `
+        <style>
+            .is-modal.page-timeline {
+                width: 1190px !important; 
+                height: 332px !important; 
+                top: auto !important; 
+                bottom: 30px !important; 
+                left: auto !important; 
+                right: 30px !important; 
+            }
+
+            @media all and  (max-width: 1919px) {
+                .is-modal.page-timeline {
+                    width: 60vw !important; 
+                }
+            }
+            @media all and  (max-width: 1850px) {
+                .is-modal.page-timeline {
+                    width: 55vw !important; 
+                }
+            }
+            @media all and  (max-width: 1650px) {
+                .is-modal.page-timeline {
+                    width: 50vw !important; 
+                }
+            }
+            @media all and  (max-width: 1480px) {
+                .is-modal.page-timeline {
+                    width: 45vw !important; 
+                }
+            }
+            @media all and  (max-width: 1350px) {
+                .is-modal.page-timeline {
+                    width: 40vw !important; 
+                    min-width: 576px;
+                }
+            }
+
+            .page-timeline td {
+                font-size: 13px;
+                padding: 3px 0px;
+            }
+            .page-timeline .table-header td {
+                font-size: 11px;
+                padding: 3px 0 0;
+            }
+            .page-timeline td input[type=text] {
+                font-size: 12px !important;
+                font-family: sans-serif !important;
+                font-weight: 300 !important;
+                padding: 0 !important;
+                width: 36px !important;
+                height: 30px !important;
+                text-align: center !important;
+                letter-spacing: 0px !important;
+            }
+        </style>
+        <div class="is-modal is-modal-content page-timeline" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div class="is-modal-bar is-draggable" draggable=""> 
+                <span>${out('Timeline')}</span>
+                <button class="is-modal-close" tabindex="-1" title="${out('Close')}">
+                    <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                </button>
+            </div>
+            <div style="position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;overflow-y:hidden;overflow-x:auto;">
+                
+                <div style="width:1190px;">
+                    <table class="table-timeline" style="margin:0 15px 10px;border-collapse:initial;">      
+                        <tr class="table-header">
+                            <td style="text-align:center"> </td>
+                            <td style="text-align:center">0</td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center">50%</td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center">100%</td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center">150%</td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center"></td>
+                            <td style="text-align:center">200%</td>
+                        </tr>  
+                        <tr>
+                            <td>
+                                <span class="bold">${out('Slide X')}</span>
+                            </td>
+                            <td>
+                                <input class="inp-x" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-600" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-800" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-900" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-1000" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-1100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-1200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-1300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-1400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-1500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-1600" placeholder="" type="text" />
+                            </td>
+
+                            <td>
+                                <input class="inp-x-1700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-1800" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-1900" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-2000" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-2100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-2200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-2300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-2400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-2500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-2600" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-2700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-x-2800" placeholder="" type="text" />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span class="bold">${out('Slide Y')}</span>
+                            </td>
+                            <td>
+                                <input class="inp-y" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-600" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-800" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-900" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-1000" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-1100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-1200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-1300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-1400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-1500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-1600" placeholder="" type="text" />
+                            </td>
+
+                            <td>
+                                <input class="inp-y-1700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-1800" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-1900" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-2000" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-2100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-2200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-2300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-2400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-2500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-2600" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-2700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-y-2800" placeholder="" type="text" />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span class="bold">${out('Scale')}</span>
+                            </td>
+                            <td>
+                                <input class="inp-sc" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-600" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-800" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-900" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-1000" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-1100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-1200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-1300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-1400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-1500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-1600" placeholder="" type="text" />
+                            </td>
+
+                            <td>
+                                <input class="inp-sc-1700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-1800" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-1900" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-2000" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-2100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-2200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-2300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-2400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-2500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-2600" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-2700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-sc-2800" placeholder="" type="text" />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span class="bold">${out('Rotate')}</span>
+                            </td>
+                            <td>
+                                <input class="inp-rt" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-600" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-800" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-900" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-1000" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-1100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-1200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-1300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-1400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-1500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-1600" placeholder="" type="text" />
+                            </td>
+
+                            <td>
+                                <input class="inp-rt-1700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-1800" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-1900" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-2000" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-2100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-2200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-2300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-2400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-2500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-2600" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-2700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-rt-2800" placeholder="" type="text" />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span class="bold">${out('Opacity')}</span>
+                            </td>
+                            <td>
+                                <input class="inp-op" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-600" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-800" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-900" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-1000" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-1100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-1200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-1300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-1400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-1500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-1600" placeholder="" type="text" />
+                            </td>
+
+                            <td>
+                                <input class="inp-op-1700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-1800" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-1900" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-2000" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-2100" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-2200" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-2300" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-2400" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-2500" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-2600" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-2700" placeholder="" type="text" />
+                            </td>
+                            <td>
+                                <input class="inp-op-2800" placeholder="" type="text" />
+                            </td>
+                        </tr>
+                    </table>
+                    <div class="flex-wrap" style="padding: 0 15px 15px;box-sizing: border-box;width: 100%;justify-content: space-between;">
+
+                        <div class="flex-wrap">
+                            <div class="flex-wrap" style="margin-right:15px">
+                                <select class="input-target">
+                                    <option value="element">${out('Element')}</option>
+                                    <option value="column">${out('Column')}</option>
+                                    <option value="row">${out('Row')}</option>
+                                    <option value="container">${out('Container')}</option>
+                                    <option value="overlay">${out('Overlay')}</option>
+                                    <option value="bg">${out('Background')}</option>
+                                    <option value="box">${out('Box')}</option>
+                                    <option value="section">${out('Section')}</option>
+                                </select>
+                            </div>
+                            <div class="flex-wrap" style="margin-right:50px">
+                                <button title="${out('Large Screen')}" class="input-device on" data-value="" style="width:40px;height:34px;">
+                                    <svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-desktop"></use></svg>
+                                </button>
+                                <button title="${out('Medium Screen')}" class="input-device" data-value="md" style="display:none;width:40px;height:34px;">
+                                    <svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>
+                                </button>
+                                <button title="${out('Small Screen')}" class="input-device" data-value="sm" style="width:40px;height:34px;">
+                                    <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
+                                </button>
+                            </div>
+
+                            <div class="flex-wrap">
+                                <label for="chkPinSection2" style="margin:0;display:flex;">
+                                    <input id="chkPinSection2" type="checkbox" style="margin:-1px 6px 0 0"> 
+                                    <span>${out('Pin Section')}</span>.
+                                </label>
+                            </div>
+                            <div class="flex-wrap div-pin-spacing" style="display:none;margin-left:5px">
+                                <div class="flex-wrap">
+                                    <button title="0" class="cmd-pin-space" data-value="" style="padding-left:15px;padding-right:15px;height:34px;">${out('No Spacing')}</button>
+                                    <button title="0" class="cmd-pin-space" data-value="medium" style="padding-left:15px;padding-right:15px;height:34px;">${out('Medium')}</button>
+                                    <button title="20" class="cmd-pin-space" data-value="large" style="padding-left:15px;padding-right:15px;height:34px;">${out('Large')}</button>
+                                </div>
+                            </div>
+
+                            <div class="flex-wrap" style="margin-left:50px">
+                                <button title="${out('Disable Smooth Animation')}" class="cmd-disable-smoothanim" style="padding-left:15px;padding-right: 15px;">${out('Disable Smooth Animation')}</button>
+                                <button title="${out('Hidden on Start')}" class="cmd-hidden-onstart" style="padding-left:15px;padding-right: 15px;">${out('Hidden on Start')}</button>
+                            </div>
+
+                        </div>
+                        
+                        <div class="flex-wrap" style="">
+                            <button title="${out('Clear All')}" class="cmd-clear-timeline" style="height:34px;flex: none;width: auto;padding: 0px !important;box-shadow: none !important;background: transparent !important;">
+                                <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                <span style="margin-left:7px">${out('Clear All')}</span>
+                            </button>
+                        </div>
+
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        `;
+    dom$1.appendHtml(builderStuff, html);
+    const modalTimeline = builderStuff.querySelector('.page-timeline');
+    this.modalTimeline = modalTimeline;
+    this.inpX = this.modalTimeline.querySelector('.inp-x');
+    this.inpX_100 = this.modalTimeline.querySelector('.inp-x-100');
+    this.inpX_200 = this.modalTimeline.querySelector('.inp-x-200');
+    this.inpX_300 = this.modalTimeline.querySelector('.inp-x-300');
+    this.inpX_400 = this.modalTimeline.querySelector('.inp-x-400');
+    this.inpX_500 = this.modalTimeline.querySelector('.inp-x-500');
+    this.inpX_600 = this.modalTimeline.querySelector('.inp-x-600');
+    this.inpX_700 = this.modalTimeline.querySelector('.inp-x-700');
+    this.inpX_800 = this.modalTimeline.querySelector('.inp-x-800');
+    this.inpX_900 = this.modalTimeline.querySelector('.inp-x-900');
+    this.inpX_1000 = this.modalTimeline.querySelector('.inp-x-1000');
+    this.inpX_1100 = this.modalTimeline.querySelector('.inp-x-1100');
+    this.inpX_1200 = this.modalTimeline.querySelector('.inp-x-1200');
+    this.inpX_1300 = this.modalTimeline.querySelector('.inp-x-1300');
+    this.inpX_1400 = this.modalTimeline.querySelector('.inp-x-1400');
+    this.inpX_1500 = this.modalTimeline.querySelector('.inp-x-1500');
+    this.inpX_1600 = this.modalTimeline.querySelector('.inp-x-1600');
+    this.inpX_1700 = this.modalTimeline.querySelector('.inp-x-1700');
+    this.inpX_1800 = this.modalTimeline.querySelector('.inp-x-1800');
+    this.inpX_1900 = this.modalTimeline.querySelector('.inp-x-1900');
+    this.inpX_2000 = this.modalTimeline.querySelector('.inp-x-2000');
+    this.inpX_2100 = this.modalTimeline.querySelector('.inp-x-2100');
+    this.inpX_2200 = this.modalTimeline.querySelector('.inp-x-2200');
+    this.inpX_2300 = this.modalTimeline.querySelector('.inp-x-2300');
+    this.inpX_2400 = this.modalTimeline.querySelector('.inp-x-2400');
+    this.inpX_2500 = this.modalTimeline.querySelector('.inp-x-2500');
+    this.inpX_2600 = this.modalTimeline.querySelector('.inp-x-2600');
+    this.inpX_2700 = this.modalTimeline.querySelector('.inp-x-2700');
+    this.inpX_2800 = this.modalTimeline.querySelector('.inp-x-2800');
+    this.inpY = this.modalTimeline.querySelector('.inp-y');
+    this.inpY_100 = this.modalTimeline.querySelector('.inp-y-100');
+    this.inpY_200 = this.modalTimeline.querySelector('.inp-y-200');
+    this.inpY_300 = this.modalTimeline.querySelector('.inp-y-300');
+    this.inpY_400 = this.modalTimeline.querySelector('.inp-y-400');
+    this.inpY_500 = this.modalTimeline.querySelector('.inp-y-500');
+    this.inpY_600 = this.modalTimeline.querySelector('.inp-y-600');
+    this.inpY_700 = this.modalTimeline.querySelector('.inp-y-700');
+    this.inpY_800 = this.modalTimeline.querySelector('.inp-y-800');
+    this.inpY_900 = this.modalTimeline.querySelector('.inp-y-900');
+    this.inpY_1000 = this.modalTimeline.querySelector('.inp-y-1000');
+    this.inpY_1100 = this.modalTimeline.querySelector('.inp-y-1100');
+    this.inpY_1200 = this.modalTimeline.querySelector('.inp-y-1200');
+    this.inpY_1300 = this.modalTimeline.querySelector('.inp-y-1300');
+    this.inpY_1400 = this.modalTimeline.querySelector('.inp-y-1400');
+    this.inpY_1500 = this.modalTimeline.querySelector('.inp-y-1500');
+    this.inpY_1600 = this.modalTimeline.querySelector('.inp-y-1600');
+    this.inpY_1700 = this.modalTimeline.querySelector('.inp-y-1700');
+    this.inpY_1800 = this.modalTimeline.querySelector('.inp-y-1800');
+    this.inpY_1900 = this.modalTimeline.querySelector('.inp-y-1900');
+    this.inpY_2000 = this.modalTimeline.querySelector('.inp-y-2000');
+    this.inpY_2100 = this.modalTimeline.querySelector('.inp-y-2100');
+    this.inpY_2200 = this.modalTimeline.querySelector('.inp-y-2200');
+    this.inpY_2300 = this.modalTimeline.querySelector('.inp-y-2300');
+    this.inpY_2400 = this.modalTimeline.querySelector('.inp-y-2400');
+    this.inpY_2500 = this.modalTimeline.querySelector('.inp-y-2500');
+    this.inpY_2600 = this.modalTimeline.querySelector('.inp-y-2600');
+    this.inpY_2700 = this.modalTimeline.querySelector('.inp-y-2700');
+    this.inpY_2800 = this.modalTimeline.querySelector('.inp-y-2800');
+    this.inpScale = this.modalTimeline.querySelector('.inp-sc');
+    this.inpScale_100 = this.modalTimeline.querySelector('.inp-sc-100');
+    this.inpScale_200 = this.modalTimeline.querySelector('.inp-sc-200');
+    this.inpScale_300 = this.modalTimeline.querySelector('.inp-sc-300');
+    this.inpScale_400 = this.modalTimeline.querySelector('.inp-sc-400');
+    this.inpScale_500 = this.modalTimeline.querySelector('.inp-sc-500');
+    this.inpScale_600 = this.modalTimeline.querySelector('.inp-sc-600');
+    this.inpScale_700 = this.modalTimeline.querySelector('.inp-sc-700');
+    this.inpScale_800 = this.modalTimeline.querySelector('.inp-sc-800');
+    this.inpScale_900 = this.modalTimeline.querySelector('.inp-sc-900');
+    this.inpScale_1000 = this.modalTimeline.querySelector('.inp-sc-1000');
+    this.inpScale_1100 = this.modalTimeline.querySelector('.inp-sc-1100');
+    this.inpScale_1200 = this.modalTimeline.querySelector('.inp-sc-1200');
+    this.inpScale_1300 = this.modalTimeline.querySelector('.inp-sc-1300');
+    this.inpScale_1400 = this.modalTimeline.querySelector('.inp-sc-1400');
+    this.inpScale_1500 = this.modalTimeline.querySelector('.inp-sc-1500');
+    this.inpScale_1600 = this.modalTimeline.querySelector('.inp-sc-1600');
+    this.inpScale_1700 = this.modalTimeline.querySelector('.inp-sc-1700');
+    this.inpScale_1800 = this.modalTimeline.querySelector('.inp-sc-1800');
+    this.inpScale_1900 = this.modalTimeline.querySelector('.inp-sc-1900');
+    this.inpScale_2000 = this.modalTimeline.querySelector('.inp-sc-2000');
+    this.inpScale_2100 = this.modalTimeline.querySelector('.inp-sc-2100');
+    this.inpScale_2200 = this.modalTimeline.querySelector('.inp-sc-2200');
+    this.inpScale_2300 = this.modalTimeline.querySelector('.inp-sc-2300');
+    this.inpScale_2400 = this.modalTimeline.querySelector('.inp-sc-2400');
+    this.inpScale_2500 = this.modalTimeline.querySelector('.inp-sc-2500');
+    this.inpScale_2600 = this.modalTimeline.querySelector('.inp-sc-2600');
+    this.inpScale_2700 = this.modalTimeline.querySelector('.inp-sc-2700');
+    this.inpScale_2800 = this.modalTimeline.querySelector('.inp-sc-2800');
+    this.inpRotate = this.modalTimeline.querySelector('.inp-rt');
+    this.inpRotate_100 = this.modalTimeline.querySelector('.inp-rt-100');
+    this.inpRotate_200 = this.modalTimeline.querySelector('.inp-rt-200');
+    this.inpRotate_300 = this.modalTimeline.querySelector('.inp-rt-300');
+    this.inpRotate_400 = this.modalTimeline.querySelector('.inp-rt-400');
+    this.inpRotate_500 = this.modalTimeline.querySelector('.inp-rt-500');
+    this.inpRotate_600 = this.modalTimeline.querySelector('.inp-rt-600');
+    this.inpRotate_700 = this.modalTimeline.querySelector('.inp-rt-700');
+    this.inpRotate_800 = this.modalTimeline.querySelector('.inp-rt-800');
+    this.inpRotate_900 = this.modalTimeline.querySelector('.inp-rt-900');
+    this.inpRotate_1000 = this.modalTimeline.querySelector('.inp-rt-1000');
+    this.inpRotate_1100 = this.modalTimeline.querySelector('.inp-rt-1100');
+    this.inpRotate_1200 = this.modalTimeline.querySelector('.inp-rt-1200');
+    this.inpRotate_1300 = this.modalTimeline.querySelector('.inp-rt-1300');
+    this.inpRotate_1400 = this.modalTimeline.querySelector('.inp-rt-1400');
+    this.inpRotate_1500 = this.modalTimeline.querySelector('.inp-rt-1500');
+    this.inpRotate_1600 = this.modalTimeline.querySelector('.inp-rt-1600');
+    this.inpRotate_1700 = this.modalTimeline.querySelector('.inp-rt-1700');
+    this.inpRotate_1800 = this.modalTimeline.querySelector('.inp-rt-1800');
+    this.inpRotate_1900 = this.modalTimeline.querySelector('.inp-rt-1900');
+    this.inpRotate_2000 = this.modalTimeline.querySelector('.inp-rt-2000');
+    this.inpRotate_2100 = this.modalTimeline.querySelector('.inp-rt-2100');
+    this.inpRotate_2200 = this.modalTimeline.querySelector('.inp-rt-2200');
+    this.inpRotate_2300 = this.modalTimeline.querySelector('.inp-rt-2300');
+    this.inpRotate_2400 = this.modalTimeline.querySelector('.inp-rt-2400');
+    this.inpRotate_2500 = this.modalTimeline.querySelector('.inp-rt-2500');
+    this.inpRotate_2600 = this.modalTimeline.querySelector('.inp-rt-2600');
+    this.inpRotate_2700 = this.modalTimeline.querySelector('.inp-rt-2700');
+    this.inpRotate_2800 = this.modalTimeline.querySelector('.inp-rt-2800');
+    this.inpOpacity = this.modalTimeline.querySelector('.inp-op');
+    this.inpOpacity_100 = this.modalTimeline.querySelector('.inp-op-100');
+    this.inpOpacity_200 = this.modalTimeline.querySelector('.inp-op-200');
+    this.inpOpacity_300 = this.modalTimeline.querySelector('.inp-op-300');
+    this.inpOpacity_400 = this.modalTimeline.querySelector('.inp-op-400');
+    this.inpOpacity_500 = this.modalTimeline.querySelector('.inp-op-500');
+    this.inpOpacity_600 = this.modalTimeline.querySelector('.inp-op-600');
+    this.inpOpacity_700 = this.modalTimeline.querySelector('.inp-op-700');
+    this.inpOpacity_800 = this.modalTimeline.querySelector('.inp-op-800');
+    this.inpOpacity_900 = this.modalTimeline.querySelector('.inp-op-900');
+    this.inpOpacity_1000 = this.modalTimeline.querySelector('.inp-op-1000');
+    this.inpOpacity_1100 = this.modalTimeline.querySelector('.inp-op-1100');
+    this.inpOpacity_1200 = this.modalTimeline.querySelector('.inp-op-1200');
+    this.inpOpacity_1300 = this.modalTimeline.querySelector('.inp-op-1300');
+    this.inpOpacity_1400 = this.modalTimeline.querySelector('.inp-op-1400');
+    this.inpOpacity_1500 = this.modalTimeline.querySelector('.inp-op-1500');
+    this.inpOpacity_1600 = this.modalTimeline.querySelector('.inp-op-1600');
+    this.inpOpacity_1700 = this.modalTimeline.querySelector('.inp-op-1700');
+    this.inpOpacity_1800 = this.modalTimeline.querySelector('.inp-op-1800');
+    this.inpOpacity_1900 = this.modalTimeline.querySelector('.inp-op-1900');
+    this.inpOpacity_2000 = this.modalTimeline.querySelector('.inp-op-2000');
+    this.inpOpacity_2100 = this.modalTimeline.querySelector('.inp-op-2100');
+    this.inpOpacity_2200 = this.modalTimeline.querySelector('.inp-op-2200');
+    this.inpOpacity_2300 = this.modalTimeline.querySelector('.inp-op-2300');
+    this.inpOpacity_2400 = this.modalTimeline.querySelector('.inp-op-2400');
+    this.inpOpacity_2500 = this.modalTimeline.querySelector('.inp-op-2500');
+    this.inpOpacity_2600 = this.modalTimeline.querySelector('.inp-op-2600');
+    this.inpOpacity_2700 = this.modalTimeline.querySelector('.inp-op-2700');
+    this.inpOpacity_2800 = this.modalTimeline.querySelector('.inp-op-2800');
+    this.dummyElm = document.querySelector('.dummy-elm');
+    const btnClose = modalTimeline.querySelector('.is-modal-close');
+    btnClose.addEventListener('click', () => {
+      this.close();
+    });
+    const inpTarget = modalTimeline.querySelector('.input-target');
+    inpTarget.addEventListener('change', () => {
+      this.read();
+    });
+    const btnDevices = this.modalTimeline.querySelectorAll('.input-device');
+    btnDevices.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const elms = this.modalTimeline.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+        this.read();
+      });
+    });
+    const chkPinSection = modalTimeline.querySelector('#chkPinSection2');
+    const divPinSpacing = modalTimeline.querySelector('.div-pin-spacing');
+    chkPinSection.addEventListener('click', () => {
+      const section = this.builder.activeSection;
+      if (!section) return;
+      this.builder.editor.saveForUndo();
+
+      if (chkPinSection.checked) {
+        section.classList.add('section-pin');
+        divPinSpacing.style.display = 'block';
+        let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="medium"]');
+        btn.classList.add('on');
+      } else {
+        section.classList.remove('section-pin');
+        divPinSpacing.style.display = 'none';
+      } //Trigger Change event
+
+
+      this.builder.onChange();
+    });
+    const btnPinSpacing = divPinSpacing.querySelectorAll('.cmd-pin-space');
+    btnPinSpacing.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const section = this.builder.activeSection;
+        if (!section) return;
+        let val = btn.getAttribute('data-value');
+        this.builder.editor.saveForUndo();
+        section.classList.remove('no-spacing');
+        section.classList.remove('pin-space-20');
+        section.classList.remove('pin-space-40');
+        section.classList.remove('pin-space-60');
+        section.classList.remove('pin-space-80');
+        section.classList.remove('pin-space-100');
+        section.classList.remove('pin-space-large');
+        if (val === '') section.classList.add('no-spacing');
+        if (val === 'large') section.classList.add('pin-space-large');
+        let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on'); //Trigger Change event
+
+        this.builder.onChange();
+      });
+    });
+    const btnDisableSmoothAnim = modalTimeline.querySelector('.cmd-disable-smoothanim');
+    btnDisableSmoothAnim.addEventListener('click', () => {
+      if (btnDisableSmoothAnim.classList.contains('on')) {
+        btnDisableSmoothAnim.classList.remove('on');
+      } else {
+        btnDisableSmoothAnim.classList.add('on');
+      }
+
+      this.applyTimeline();
+    });
+    const btnHiddenOnStart = modalTimeline.querySelector('.cmd-hidden-onstart');
+    btnHiddenOnStart.addEventListener('click', () => {
+      if (btnHiddenOnStart.classList.contains('on')) {
+        btnHiddenOnStart.classList.remove('on');
+      } else {
+        btnHiddenOnStart.classList.add('on');
+      }
+
+      this.applyTimeline();
+    });
+    const btnClearTimeline = modalTimeline.querySelector('.cmd-clear-timeline');
+    btnClearTimeline.addEventListener('click', () => {
+      let activeElement;
+      let target = this.getTarget();
+      activeElement = target.element;
+      if (!activeElement) return;
+      this.builder.editor.saveForUndo();
+      this.cleanup(activeElement);
+      activeElement.style.transform = '';
+      activeElement.style.transition = '';
+      activeElement.style.opacity = '';
+      this.read();
+
+      if (this.builder.win.skrollrr) {
+        this.builder.win.skrollrr.refresh();
+      } //Trigger Change event
+
+
+      this.builder.settings.onChange();
+    }); //Extend onPageContentClick 
+
+    let old = this.builder.settings.onPageContentClick;
+
+    this.builder.settings.onPageContentClick = () => {
+      if (old) old.call(this); // call user's defined onRender
+
+      if (!modalTimeline.classList.contains('active')) return;
+      setTimeout(() => {
+        this.clickContent();
+      }, 30);
+    };
+
+    const inps = this.modalTimeline.querySelectorAll('.table-timeline input');
+    inps.forEach(inp => {
+      inp.addEventListener('change', () => {
+        this.applyTimeline();
+      });
+    });
+  }
+
+  clickContent() {
+    let inpTarget = this.modalTimeline.querySelector('.input-target');
+    inpTarget.value = 'element'; // default
+    // Dynamically choose target based on selected element
+
+    let currentTarget = this.readTarget();
+
+    if (currentTarget) {
+      if (currentTarget.name === 'element' || currentTarget.name === 'inspectedElement') {
+        inpTarget.value = 'element';
+      } else if (currentTarget.name === 'column') {
+        inpTarget.value = 'column';
+      } else if (currentTarget.name === 'row') {
+        inpTarget.value = 'row';
+      } else if (currentTarget.name === 'container') {
+        inpTarget.value = 'container';
+      } else if (currentTarget.name === 'bg') {
+        inpTarget.value = 'bg';
+      } else if (currentTarget.name === 'overlay') {
+        inpTarget.value = 'overlay';
+      } else if (currentTarget.name === 'box') {
+        inpTarget.value = 'box';
+      } else if (currentTarget.name === 'section') {
+        inpTarget.value = 'section';
+      }
+
+      this.read();
+    } else {
+      this.clearSettings();
+    }
+  }
+
+  clearSettings() {
+    this.inpX.value = '';
+    this.inpX_100.value = '';
+    this.inpX_200.value = '';
+    this.inpX_300.value = '';
+    this.inpX_400.value = '';
+    this.inpX_500.value = '';
+    this.inpX_600.value = '';
+    this.inpX_700.value = '';
+    this.inpX_800.value = '';
+    this.inpX_900.value = '';
+    this.inpX_900.value = '';
+    this.inpX_1000.value = '';
+    this.inpX_1100.value = '';
+    this.inpX_1200.value = '';
+    this.inpX_1300.value = '';
+    this.inpX_1400.value = '';
+    this.inpX_1500.value = '';
+    this.inpX_1600.value = '';
+    this.inpX_1700.value = '';
+    this.inpX_1800.value = '';
+    this.inpX_1900.value = '';
+    this.inpX_2000.value = '';
+    this.inpX_2100.value = '';
+    this.inpX_2200.value = '';
+    this.inpX_2300.value = '';
+    this.inpX_2400.value = '';
+    this.inpX_2500.value = '';
+    this.inpX_2600.value = '';
+    this.inpX_2700.value = '';
+    this.inpX_2800.value = '';
+    this.inpY.value = '';
+    this.inpY_100.value = '';
+    this.inpY_200.value = '';
+    this.inpY_300.value = '';
+    this.inpY_400.value = '';
+    this.inpY_500.value = '';
+    this.inpY_600.value = '';
+    this.inpY_700.value = '';
+    this.inpY_800.value = '';
+    this.inpY_900.value = '';
+    this.inpY_900.value = '';
+    this.inpY_1000.value = '';
+    this.inpY_1100.value = '';
+    this.inpY_1200.value = '';
+    this.inpY_1300.value = '';
+    this.inpY_1400.value = '';
+    this.inpY_1500.value = '';
+    this.inpY_1600.value = '';
+    this.inpY_1700.value = '';
+    this.inpY_1800.value = '';
+    this.inpY_1900.value = '';
+    this.inpY_2000.value = '';
+    this.inpY_2100.value = '';
+    this.inpY_2200.value = '';
+    this.inpY_2300.value = '';
+    this.inpY_2400.value = '';
+    this.inpY_2500.value = '';
+    this.inpY_2600.value = '';
+    this.inpY_2700.value = '';
+    this.inpY_2800.value = '';
+    this.inpScale.value = '';
+    this.inpScale_100.value = '';
+    this.inpScale_200.value = '';
+    this.inpScale_300.value = '';
+    this.inpScale_400.value = '';
+    this.inpScale_500.value = '';
+    this.inpScale_600.value = '';
+    this.inpScale_700.value = '';
+    this.inpScale_800.value = '';
+    this.inpScale_900.value = '';
+    this.inpScale_900.value = '';
+    this.inpScale_1000.value = '';
+    this.inpScale_1100.value = '';
+    this.inpScale_1200.value = '';
+    this.inpScale_1300.value = '';
+    this.inpScale_1400.value = '';
+    this.inpScale_1500.value = '';
+    this.inpScale_1600.value = '';
+    this.inpScale_1700.value = '';
+    this.inpScale_1800.value = '';
+    this.inpScale_1900.value = '';
+    this.inpScale_2000.value = '';
+    this.inpScale_2100.value = '';
+    this.inpScale_2200.value = '';
+    this.inpScale_2300.value = '';
+    this.inpScale_2400.value = '';
+    this.inpScale_2500.value = '';
+    this.inpScale_2600.value = '';
+    this.inpScale_2700.value = '';
+    this.inpScale_2800.value = '';
+    this.inpRotate.value = '';
+    this.inpRotate_100.value = '';
+    this.inpRotate_200.value = '';
+    this.inpRotate_300.value = '';
+    this.inpRotate_400.value = '';
+    this.inpRotate_500.value = '';
+    this.inpRotate_600.value = '';
+    this.inpRotate_700.value = '';
+    this.inpRotate_800.value = '';
+    this.inpRotate_900.value = '';
+    this.inpRotate_900.value = '';
+    this.inpRotate_1000.value = '';
+    this.inpRotate_1100.value = '';
+    this.inpRotate_1200.value = '';
+    this.inpRotate_1300.value = '';
+    this.inpRotate_1400.value = '';
+    this.inpRotate_1500.value = '';
+    this.inpRotate_1600.value = '';
+    this.inpRotate_1700.value = '';
+    this.inpRotate_1800.value = '';
+    this.inpRotate_1900.value = '';
+    this.inpRotate_2000.value = '';
+    this.inpRotate_2100.value = '';
+    this.inpRotate_2200.value = '';
+    this.inpRotate_2300.value = '';
+    this.inpRotate_2400.value = '';
+    this.inpRotate_2500.value = '';
+    this.inpRotate_2600.value = '';
+    this.inpRotate_2700.value = '';
+    this.inpRotate_2800.value = '';
+    this.inpOpacity.value = '';
+    this.inpOpacity_100.value = '';
+    this.inpOpacity_200.value = '';
+    this.inpOpacity_300.value = '';
+    this.inpOpacity_400.value = '';
+    this.inpOpacity_500.value = '';
+    this.inpOpacity_600.value = '';
+    this.inpOpacity_700.value = '';
+    this.inpOpacity_800.value = '';
+    this.inpOpacity_900.value = '';
+    this.inpOpacity_900.value = '';
+    this.inpOpacity_1000.value = '';
+    this.inpOpacity_1100.value = '';
+    this.inpOpacity_1200.value = '';
+    this.inpOpacity_1300.value = '';
+    this.inpOpacity_1400.value = '';
+    this.inpOpacity_1500.value = '';
+    this.inpOpacity_1600.value = '';
+    this.inpOpacity_1700.value = '';
+    this.inpOpacity_1800.value = '';
+    this.inpOpacity_1900.value = '';
+    this.inpOpacity_2000.value = '';
+    this.inpOpacity_2100.value = '';
+    this.inpOpacity_2200.value = '';
+    this.inpOpacity_2300.value = '';
+    this.inpOpacity_2400.value = '';
+    this.inpOpacity_2500.value = '';
+    this.inpOpacity_2600.value = '';
+    this.inpOpacity_2700.value = '';
+    this.inpOpacity_2800.value = '';
+  }
+
+  read() {
+    this.clearSettings();
+    let activeElement;
+    let target = this.getTarget();
+    activeElement = target.element;
+    if (!activeElement) return;
+    const activeSection = this.builder.activeSection;
+
+    if (activeSection) {
+      const divPinSpacing = this.modalTimeline.querySelector('.div-pin-spacing');
+      const chkPinSection = this.modalTimeline.querySelector('#chkPinSection2');
+
+      if (activeSection.classList.contains('section-pin')) {
+        chkPinSection.checked = true;
+        divPinSpacing.style.display = 'block';
+      } else {
+        chkPinSection.checked = false;
+        divPinSpacing.style.display = 'none';
+      }
+
+      let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
+      elms.forEach(elm => {
+        elm.classList.remove('on');
+      });
+
+      if (activeSection.classList.contains('no-spacing')) {
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value=""]');
+        btn.classList.add('on');
+      } else if (activeSection.classList.contains('pin-space-large')) {
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="large"]');
+        btn.classList.add('on');
+      } else {
+        let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="medium"]');
+        btn.classList.add('on');
+      }
+    }
+
+    const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
+
+    if (activeElement.hasAttribute('data-smooth-scrolling')) {
+      btnDisableSmoothAnim.classList.add('on');
+    } else {
+      btnDisableSmoothAnim.classList.remove('on');
+    }
+
+    const btnHiddenOnStart = this.modalTimeline.querySelector('.cmd-hidden-onstart');
+
+    if (activeElement.hasAttribute('data-hidden-onstart')) {
+      btnHiddenOnStart.classList.add('on');
+    } else {
+      btnHiddenOnStart.classList.remove('on');
+    }
+
+    for (let i = 0; i <= 28; i++) {
+      this.fillValue(i * 100, activeElement);
+    }
+  }
+
+  fillValue(i, activeElement) {
+    let s = '';
+    if (i > 0) s = '-' + i;
+    let css;
+    let device = this.getDevice();
+
+    if (device === 'md') {
+      // 970-1280
+      css = activeElement.getAttribute('data-md-t' + s);
+    } else if (device === 'sm') {
+      // <970
+      css = activeElement.getAttribute('data-sm-t' + s);
+    } else {
+      // >1280
+      css = activeElement.getAttribute('data-t' + s);
+    }
+
+    this.dummyElm.style.cssText = css;
+    let transform = this.getTransform(this.dummyElm, css);
+    if (transform.translateX) this.modalTimeline.querySelector('.inp-x' + s).value = transform.translateX.replace('px', '');
+    if (transform.translateY) this.modalTimeline.querySelector('.inp-y' + s).value = transform.translateY.replace('px', '');
+    if (transform.scale) this.modalTimeline.querySelector('.inp-sc' + s).value = transform.scale;
+    if (transform.rotate) this.modalTimeline.querySelector('.inp-rt' + s).value = transform.rotate;
+    if (transform.opacity) this.modalTimeline.querySelector('.inp-op' + s).value = transform.opacity;
+  }
+
+  applyTimeline() {
+    let activeElement;
+    let target = this.getTarget();
+    activeElement = target.element;
+    if (!activeElement) return;
+    let valX;
+    if (this.inpX.value !== '') valX = this.inpX.value + (this.inpX.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_100;
+    if (this.inpX_100.value !== '') valX_100 = this.inpX_100.value + (this.inpX_100.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_200;
+    if (this.inpX_200.value !== '') valX_200 = this.inpX_200.value + (this.inpX_200.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_300;
+    if (this.inpX_300.value !== '') valX_300 = this.inpX_300.value + (this.inpX_300.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_400;
+    if (this.inpX_400.value !== '') valX_400 = this.inpX_400.value + (this.inpX_400.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_500;
+    if (this.inpX_500.value !== '') valX_500 = this.inpX_500.value + (this.inpX_500.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_600;
+    if (this.inpX_600.value !== '') valX_600 = this.inpX_600.value + (this.inpX_600.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_700;
+    if (this.inpX_700.value !== '') valX_700 = this.inpX_700.value + (this.inpX_700.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_800;
+    if (this.inpX_800.value !== '') valX_800 = this.inpX_800.value + (this.inpX_800.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_900;
+    if (this.inpX_900.value !== '') valX_900 = this.inpX_900.value + (this.inpX_900.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_1000;
+    if (this.inpX_1000.value !== '') valX_1000 = this.inpX_1000.value + (this.inpX_1000.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_1100;
+    if (this.inpX_1100.value !== '') valX_1100 = this.inpX_1100.value + (this.inpX_1100.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_1200;
+    if (this.inpX_1200.value !== '') valX_1200 = this.inpX_1200.value + (this.inpX_1200.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_1300;
+    if (this.inpX_1300.value !== '') valX_1300 = this.inpX_1300.value + (this.inpX_1300.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_1400;
+    if (this.inpX_1400.value !== '') valX_1400 = this.inpX_1400.value + (this.inpX_1400.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_1500;
+    if (this.inpX_1500.value !== '') valX_1500 = this.inpX_1500.value + (this.inpX_1500.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_1600;
+    if (this.inpX_1600.value !== '') valX_1600 = this.inpX_1600.value + (this.inpX_1600.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_1700;
+    if (this.inpX_1700.value !== '') valX_1700 = this.inpX_1700.value + (this.inpX_1700.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_1800;
+    if (this.inpX_1800.value !== '') valX_1800 = this.inpX_1800.value + (this.inpX_1800.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_1900;
+    if (this.inpX_1900.value !== '') valX_1900 = this.inpX_1900.value + (this.inpX_1900.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_2000;
+    if (this.inpX_2000.value !== '') valX_2000 = this.inpX_2000.value + (this.inpX_2000.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_2100;
+    if (this.inpX_2100.value !== '') valX_2100 = this.inpX_2100.value + (this.inpX_2100.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_2200;
+    if (this.inpX_2200.value !== '') valX_2200 = this.inpX_2200.value + (this.inpX_2200.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_2300;
+    if (this.inpX_2300.value !== '') valX_2300 = this.inpX_2300.value + (this.inpX_2300.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_2400;
+    if (this.inpX_2400.value !== '') valX_2400 = this.inpX_2400.value + (this.inpX_2400.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_2500;
+    if (this.inpX_2500.value !== '') valX_2500 = this.inpX_2500.value + (this.inpX_2500.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_2600;
+    if (this.inpX_2600.value !== '') valX_2600 = this.inpX_2600.value + (this.inpX_2600.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_2700;
+    if (this.inpX_2700.value !== '') valX_2700 = this.inpX_2700.value + (this.inpX_2700.value.indexOf('%') !== -1 ? '' : 'px');
+    let valX_2800;
+    if (this.inpX_2800.value !== '') valX_2800 = this.inpX_2800.value + (this.inpX_2800.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY;
+    if (this.inpY.value !== '') valY = this.inpY.value + (this.inpY.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_100;
+    if (this.inpY_100.value !== '') valY_100 = this.inpY_100.value + (this.inpY_100.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_200;
+    if (this.inpY_200.value !== '') valY_200 = this.inpY_200.value + (this.inpY_200.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_300;
+    if (this.inpY_300.value !== '') valY_300 = this.inpY_300.value + (this.inpY_300.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_400;
+    if (this.inpY_400.value !== '') valY_400 = this.inpY_400.value + (this.inpY_400.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_500;
+    if (this.inpY_500.value !== '') valY_500 = this.inpY_500.value + (this.inpY_500.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_600;
+    if (this.inpY_600.value !== '') valY_600 = this.inpY_600.value + (this.inpY_600.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_700;
+    if (this.inpY_700.value !== '') valY_700 = this.inpY_700.value + (this.inpY_700.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_800;
+    if (this.inpY_800.value !== '') valY_800 = this.inpY_800.value + (this.inpY_800.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_900;
+    if (this.inpY_900.value !== '') valY_900 = this.inpY_900.value + (this.inpY_900.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_1000;
+    if (this.inpY_1000.value !== '') valY_1000 = this.inpY_1000.value + (this.inpY_1000.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_1100;
+    if (this.inpY_1100.value !== '') valY_1100 = this.inpY_1100.value + (this.inpY_1100.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_1200;
+    if (this.inpY_1200.value !== '') valY_1200 = this.inpY_1200.value + (this.inpY_1200.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_1300;
+    if (this.inpY_1300.value !== '') valY_1300 = this.inpY_1300.value + (this.inpY_1300.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_1400;
+    if (this.inpY_1400.value !== '') valY_1400 = this.inpY_1400.value + (this.inpY_1400.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_1500;
+    if (this.inpY_1500.value !== '') valY_1500 = this.inpY_1500.value + (this.inpY_1500.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_1600;
+    if (this.inpY_1600.value !== '') valY_1600 = this.inpY_1600.value + (this.inpY_1600.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_1700;
+    if (this.inpY_1700.value !== '') valY_1700 = this.inpY_1700.value + (this.inpY_1700.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_1800;
+    if (this.inpY_1800.value !== '') valY_1800 = this.inpY_1800.value + (this.inpY_1800.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_1900;
+    if (this.inpY_1900.value !== '') valY_1900 = this.inpY_1900.value + (this.inpY_1900.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_2000;
+    if (this.inpY_2000.value !== '') valY_2000 = this.inpY_2000.value + (this.inpY_2000.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_2100;
+    if (this.inpY_2100.value !== '') valY_2100 = this.inpY_2100.value + (this.inpY_2100.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_2200;
+    if (this.inpY_2200.value !== '') valY_2200 = this.inpY_2200.value + (this.inpY_2200.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_2300;
+    if (this.inpY_2300.value !== '') valY_2300 = this.inpY_2300.value + (this.inpY_2300.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_2400;
+    if (this.inpY_2400.value !== '') valY_2400 = this.inpY_2400.value + (this.inpY_2400.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_2500;
+    if (this.inpY_2500.value !== '') valY_2500 = this.inpY_2500.value + (this.inpY_2500.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_2600;
+    if (this.inpY_2600.value !== '') valY_2600 = this.inpY_2600.value + (this.inpY_2600.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_2700;
+    if (this.inpY_2700.value !== '') valY_2700 = this.inpY_2700.value + (this.inpY_2700.value.indexOf('%') !== -1 ? '' : 'px');
+    let valY_2800;
+    if (this.inpY_2800.value !== '') valY_2800 = this.inpY_2800.value + (this.inpY_2800.value.indexOf('%') !== -1 ? '' : 'px');
+    let valScale;
+    if (this.inpScale.value !== '') valScale = this.inpScale.value;
+    let valScale_100;
+    if (this.inpScale_100.value !== '') valScale_100 = this.inpScale_100.value;
+    let valScale_200;
+    if (this.inpScale_200.value !== '') valScale_200 = this.inpScale_200.value;
+    let valScale_300;
+    if (this.inpScale_300.value !== '') valScale_300 = this.inpScale_300.value;
+    let valScale_400;
+    if (this.inpScale_400.value !== '') valScale_400 = this.inpScale_400.value;
+    let valScale_500;
+    if (this.inpScale_500.value !== '') valScale_500 = this.inpScale_500.value;
+    let valScale_600;
+    if (this.inpScale_600.value !== '') valScale_600 = this.inpScale_600.value;
+    let valScale_700;
+    if (this.inpScale_700.value !== '') valScale_700 = this.inpScale_700.value;
+    let valScale_800;
+    if (this.inpScale_800.value !== '') valScale_800 = this.inpScale_800.value;
+    let valScale_900;
+    if (this.inpScale_900.value !== '') valScale_900 = this.inpScale_900.value;
+    let valScale_1000;
+    if (this.inpScale_1000.value !== '') valScale_1000 = this.inpScale_1000.value;
+    let valScale_1100;
+    if (this.inpScale_1100.value !== '') valScale_1100 = this.inpScale_1100.value;
+    let valScale_1200;
+    if (this.inpScale_1200.value !== '') valScale_1200 = this.inpScale_1200.value;
+    let valScale_1300;
+    if (this.inpScale_1300.value !== '') valScale_1300 = this.inpScale_1300.value;
+    let valScale_1400;
+    if (this.inpScale_1400.value !== '') valScale_1400 = this.inpScale_1400.value;
+    let valScale_1500;
+    if (this.inpScale_1500.value !== '') valScale_1500 = this.inpScale_1500.value;
+    let valScale_1600;
+    if (this.inpScale_1600.value !== '') valScale_1600 = this.inpScale_1600.value;
+    let valScale_1700;
+    if (this.inpScale_1700.value !== '') valScale_1700 = this.inpScale_1700.value;
+    let valScale_1800;
+    if (this.inpScale_1800.value !== '') valScale_1800 = this.inpScale_1800.value;
+    let valScale_1900;
+    if (this.inpScale_1900.value !== '') valScale_1900 = this.inpScale_1900.value;
+    let valScale_2000;
+    if (this.inpScale_2000.value !== '') valScale_2000 = this.inpScale_2000.value;
+    let valScale_2100;
+    if (this.inpScale_2100.value !== '') valScale_2100 = this.inpScale_2100.value;
+    let valScale_2200;
+    if (this.inpScale_2200.value !== '') valScale_2200 = this.inpScale_2200.value;
+    let valScale_2300;
+    if (this.inpScale_2300.value !== '') valScale_2300 = this.inpScale_2300.value;
+    let valScale_2400;
+    if (this.inpScale_2400.value !== '') valScale_2400 = this.inpScale_2400.value;
+    let valScale_2500;
+    if (this.inpScale_2500.value !== '') valScale_2500 = this.inpScale_2500.value;
+    let valScale_2600;
+    if (this.inpScale_2600.value !== '') valScale_2600 = this.inpScale_2600.value;
+    let valScale_2700;
+    if (this.inpScale_2700.value !== '') valScale_2700 = this.inpScale_2700.value;
+    let valScale_2800;
+    if (this.inpScale_2800.value !== '') valScale_2800 = this.inpScale_2800.value;
+    let valRotate;
+    if (this.inpRotate.value !== '') valRotate = this.inpRotate.value;
+    let valRotate_100;
+    if (this.inpRotate_100.value !== '') valRotate_100 = this.inpRotate_100.value;
+    let valRotate_200;
+    if (this.inpRotate_200.value !== '') valRotate_200 = this.inpRotate_200.value;
+    let valRotate_300;
+    if (this.inpRotate_300.value !== '') valRotate_300 = this.inpRotate_300.value;
+    let valRotate_400;
+    if (this.inpRotate_400.value !== '') valRotate_400 = this.inpRotate_400.value;
+    let valRotate_500;
+    if (this.inpRotate_500.value !== '') valRotate_500 = this.inpRotate_500.value;
+    let valRotate_600;
+    if (this.inpRotate_600.value !== '') valRotate_600 = this.inpRotate_600.value;
+    let valRotate_700;
+    if (this.inpRotate_700.value !== '') valRotate_700 = this.inpRotate_700.value;
+    let valRotate_800;
+    if (this.inpRotate_800.value !== '') valRotate_800 = this.inpRotate_800.value;
+    let valRotate_900;
+    if (this.inpRotate_900.value !== '') valRotate_900 = this.inpRotate_900.value;
+    let valRotate_1000;
+    if (this.inpRotate_1000.value !== '') valRotate_1000 = this.inpRotate_1000.value;
+    let valRotate_1100;
+    if (this.inpRotate_1100.value !== '') valRotate_1100 = this.inpRotate_1100.value;
+    let valRotate_1200;
+    if (this.inpRotate_1200.value !== '') valRotate_1200 = this.inpRotate_1200.value;
+    let valRotate_1300;
+    if (this.inpRotate_1300.value !== '') valRotate_1300 = this.inpRotate_1300.value;
+    let valRotate_1400;
+    if (this.inpRotate_1400.value !== '') valRotate_1400 = this.inpRotate_1400.value;
+    let valRotate_1500;
+    if (this.inpRotate_1500.value !== '') valRotate_1500 = this.inpRotate_1500.value;
+    let valRotate_1600;
+    if (this.inpRotate_1600.value !== '') valRotate_1600 = this.inpRotate_1600.value;
+    let valRotate_1700;
+    if (this.inpRotate_1700.value !== '') valRotate_1700 = this.inpRotate_1700.value;
+    let valRotate_1800;
+    if (this.inpRotate_1800.value !== '') valRotate_1800 = this.inpRotate_1800.value;
+    let valRotate_1900;
+    if (this.inpRotate_1900.value !== '') valRotate_1900 = this.inpRotate_1900.value;
+    let valRotate_2000;
+    if (this.inpRotate_2000.value !== '') valRotate_2000 = this.inpRotate_2000.value;
+    let valRotate_2100;
+    if (this.inpRotate_2100.value !== '') valRotate_2100 = this.inpRotate_2100.value;
+    let valRotate_2200;
+    if (this.inpRotate_2200.value !== '') valRotate_2200 = this.inpRotate_2200.value;
+    let valRotate_2300;
+    if (this.inpRotate_2300.value !== '') valRotate_2300 = this.inpRotate_2300.value;
+    let valRotate_2400;
+    if (this.inpRotate_2400.value !== '') valRotate_2400 = this.inpRotate_2400.value;
+    let valRotate_2500;
+    if (this.inpRotate_2500.value !== '') valRotate_2500 = this.inpRotate_2500.value;
+    let valRotate_2600;
+    if (this.inpRotate_2600.value !== '') valRotate_2600 = this.inpRotate_2600.value;
+    let valRotate_2700;
+    if (this.inpRotate_2700.value !== '') valRotate_2700 = this.inpRotate_2700.value;
+    let valRotate_2800;
+    if (this.inpRotate_2800.value !== '') valRotate_2800 = this.inpRotate_2800.value;
+    let valOpacity;
+    if (this.inpOpacity.value !== '') valOpacity = this.inpOpacity.value;
+    let valOpacity_100;
+    if (this.inpOpacity_100.value !== '') valOpacity_100 = this.inpOpacity_100.value;
+    let valOpacity_200;
+    if (this.inpOpacity_200.value !== '') valOpacity_200 = this.inpOpacity_200.value;
+    let valOpacity_300;
+    if (this.inpOpacity_300.value !== '') valOpacity_300 = this.inpOpacity_300.value;
+    let valOpacity_400;
+    if (this.inpOpacity_400.value !== '') valOpacity_400 = this.inpOpacity_400.value;
+    let valOpacity_500;
+    if (this.inpOpacity_500.value !== '') valOpacity_500 = this.inpOpacity_500.value;
+    let valOpacity_600;
+    if (this.inpOpacity_600.value !== '') valOpacity_600 = this.inpOpacity_600.value;
+    let valOpacity_700;
+    if (this.inpOpacity_700.value !== '') valOpacity_700 = this.inpOpacity_700.value;
+    let valOpacity_800;
+    if (this.inpOpacity_800.value !== '') valOpacity_800 = this.inpOpacity_800.value;
+    let valOpacity_900;
+    if (this.inpOpacity_900.value !== '') valOpacity_900 = this.inpOpacity_900.value;
+    let valOpacity_1000;
+    if (this.inpOpacity_1000.value !== '') valOpacity_1000 = this.inpOpacity_1000.value;
+    let valOpacity_1100;
+    if (this.inpOpacity_1100.value !== '') valOpacity_1100 = this.inpOpacity_1100.value;
+    let valOpacity_1200;
+    if (this.inpOpacity_1200.value !== '') valOpacity_1200 = this.inpOpacity_1200.value;
+    let valOpacity_1300;
+    if (this.inpOpacity_1300.value !== '') valOpacity_1300 = this.inpOpacity_1300.value;
+    let valOpacity_1400;
+    if (this.inpOpacity_1400.value !== '') valOpacity_1400 = this.inpOpacity_1400.value;
+    let valOpacity_1500;
+    if (this.inpOpacity_1500.value !== '') valOpacity_1500 = this.inpOpacity_1500.value;
+    let valOpacity_1600;
+    if (this.inpOpacity_1600.value !== '') valOpacity_1600 = this.inpOpacity_1600.value;
+    let valOpacity_1700;
+    if (this.inpOpacity_1700.value !== '') valOpacity_1700 = this.inpOpacity_1700.value;
+    let valOpacity_1800;
+    if (this.inpOpacity_1800.value !== '') valOpacity_1800 = this.inpOpacity_1800.value;
+    let valOpacity_1900;
+    if (this.inpOpacity_1900.value !== '') valOpacity_1900 = this.inpOpacity_1900.value;
+    let valOpacity_2000;
+    if (this.inpOpacity_2000.value !== '') valOpacity_2000 = this.inpOpacity_2000.value;
+    let valOpacity_2100;
+    if (this.inpOpacity_2100.value !== '') valOpacity_2100 = this.inpOpacity_2100.value;
+    let valOpacity_2200;
+    if (this.inpOpacity_2200.value !== '') valOpacity_2200 = this.inpOpacity_2200.value;
+    let valOpacity_2300;
+    if (this.inpOpacity_2300.value !== '') valOpacity_2300 = this.inpOpacity_2300.value;
+    let valOpacity_2400;
+    if (this.inpOpacity_2400.value !== '') valOpacity_2400 = this.inpOpacity_2400.value;
+    let valOpacity_2500;
+    if (this.inpOpacity_2500.value !== '') valOpacity_2500 = this.inpOpacity_2500.value;
+    let valOpacity_2600;
+    if (this.inpOpacity_2600.value !== '') valOpacity_2600 = this.inpOpacity_2600.value;
+    let valOpacity_2700;
+    if (this.inpOpacity_2700.value !== '') valOpacity_2700 = this.inpOpacity_2700.value;
+    let valOpacity_2800;
+    if (this.inpOpacity_2800.value !== '') valOpacity_2800 = this.inpOpacity_2800.value;
+    let anim = (valX ? ` translateX(${valX})` : '') + (valY ? ` translateY(${valY})` : '') + (valScale ? ` scale(${valScale})` : '') + (valRotate ? ` rotate(${valRotate})` : '');
+    anim = anim.trim();
+    let anim_100 = (valX_100 ? ` translateX(${valX_100})` : '') + (valY_100 ? ` translateY(${valY_100})` : '') + (valScale_100 ? ` scale(${valScale_100})` : '') + (valRotate_100 ? ` rotate(${valRotate_100})` : '');
+    anim_100 = anim_100.trim();
+    let anim_200 = (valX_200 ? ` translateX(${valX_200})` : '') + (valY_200 ? ` translateY(${valY_200})` : '') + (valScale_200 ? ` scale(${valScale_200})` : '') + (valRotate_200 ? ` rotate(${valRotate_200})` : '');
+    anim_200 = anim_200.trim();
+    let anim_300 = (valX_300 ? ` translateX(${valX_300})` : '') + (valY_300 ? ` translateY(${valY_300})` : '') + (valScale_300 ? ` scale(${valScale_300})` : '') + (valRotate_300 ? ` rotate(${valRotate_300})` : '');
+    anim_300 = anim_300.trim();
+    let anim_400 = (valX_400 ? ` translateX(${valX_400})` : '') + (valY_400 ? ` translateY(${valY_400})` : '') + (valScale_400 ? ` scale(${valScale_400})` : '') + (valRotate_400 ? ` rotate(${valRotate_400})` : '');
+    anim_400 = anim_400.trim();
+    let anim_500 = (valX_500 ? ` translateX(${valX_500})` : '') + (valY_500 ? ` translateY(${valY_500})` : '') + (valScale_500 ? ` scale(${valScale_500})` : '') + (valRotate_500 ? ` rotate(${valRotate_500})` : '');
+    anim_500 = anim_500.trim();
+    let anim_600 = (valX_600 ? ` translateX(${valX_600})` : '') + (valY_600 ? ` translateY(${valY_600})` : '') + (valScale_600 ? ` scale(${valScale_600})` : '') + (valRotate_600 ? ` rotate(${valRotate_600})` : '');
+    anim_600 = anim_600.trim();
+    let anim_700 = (valX_700 ? ` translateX(${valX_700})` : '') + (valY_700 ? ` translateY(${valY_700})` : '') + (valScale_700 ? ` scale(${valScale_700})` : '') + (valRotate_700 ? ` rotate(${valRotate_700})` : '');
+    anim_700 = anim_700.trim();
+    let anim_800 = (valX_800 ? ` translateX(${valX_800})` : '') + (valY_800 ? ` translateY(${valY_800})` : '') + (valScale_800 ? ` scale(${valScale_800})` : '') + (valRotate_800 ? ` rotate(${valRotate_800})` : '');
+    anim_800 = anim_800.trim();
+    let anim_900 = (valX_900 ? ` translateX(${valX_900})` : '') + (valY_900 ? ` translateY(${valY_900})` : '') + (valScale_900 ? ` scale(${valScale_900})` : '') + (valRotate_900 ? ` rotate(${valRotate_900})` : '');
+    anim_900 = anim_900.trim();
+    let anim_1000 = (valX_1000 ? ` translateX(${valX_1000})` : '') + (valY_1000 ? ` translateY(${valY_1000})` : '') + (valScale_1000 ? ` scale(${valScale_1000})` : '') + (valRotate_1000 ? ` rotate(${valRotate_1000})` : '');
+    anim_1000 = anim_1000.trim();
+    let anim_1100 = (valX_1100 ? ` translateX(${valX_1100})` : '') + (valY_1100 ? ` translateY(${valY_1100})` : '') + (valScale_1100 ? ` scale(${valScale_1100})` : '') + (valRotate_1100 ? ` rotate(${valRotate_1100})` : '');
+    anim_1100 = anim_1100.trim();
+    let anim_1200 = (valX_1200 ? ` translateX(${valX_1200})` : '') + (valY_1200 ? ` translateY(${valY_1200})` : '') + (valScale_1200 ? ` scale(${valScale_1200})` : '') + (valRotate_1200 ? ` rotate(${valRotate_1200})` : '');
+    anim_1200 = anim_1200.trim();
+    let anim_1300 = (valX_1300 ? ` translateX(${valX_1300})` : '') + (valY_1300 ? ` translateY(${valY_1300})` : '') + (valScale_1300 ? ` scale(${valScale_1300})` : '') + (valRotate_1300 ? ` rotate(${valRotate_1300})` : '');
+    anim_1300 = anim_1300.trim();
+    let anim_1400 = (valX_1400 ? ` translateX(${valX_1400})` : '') + (valY_1400 ? ` translateY(${valY_1400})` : '') + (valScale_1400 ? ` scale(${valScale_1400})` : '') + (valRotate_1400 ? ` rotate(${valRotate_1400})` : '');
+    anim_1400 = anim_1400.trim();
+    let anim_1500 = (valX_1500 ? ` translateX(${valX_1500})` : '') + (valY_1500 ? ` translateY(${valY_1500})` : '') + (valScale_1500 ? ` scale(${valScale_1500})` : '') + (valRotate_1500 ? ` rotate(${valRotate_1500})` : '');
+    anim_1500 = anim_1500.trim();
+    let anim_1600 = (valX_1600 ? ` translateX(${valX_1600})` : '') + (valY_1600 ? ` translateY(${valY_1600})` : '') + (valScale_1600 ? ` scale(${valScale_1600})` : '') + (valRotate_1600 ? ` rotate(${valRotate_1600})` : '');
+    anim_1600 = anim_1600.trim();
+    let anim_1700 = (valX_1700 ? ` translateX(${valX_1700})` : '') + (valY_1700 ? ` translateY(${valY_1700})` : '') + (valScale_1700 ? ` scale(${valScale_1700})` : '') + (valRotate_1700 ? ` rotate(${valRotate_1700})` : '');
+    anim_1700 = anim_1700.trim();
+    let anim_1800 = (valX_1800 ? ` translateX(${valX_1800})` : '') + (valY_1800 ? ` translateY(${valY_1800})` : '') + (valScale_1800 ? ` scale(${valScale_1800})` : '') + (valRotate_1800 ? ` rotate(${valRotate_1800})` : '');
+    anim_1800 = anim_1800.trim();
+    let anim_1900 = (valX_1900 ? ` translateX(${valX_1900})` : '') + (valY_1900 ? ` translateY(${valY_1900})` : '') + (valScale_1900 ? ` scale(${valScale_1900})` : '') + (valRotate_1900 ? ` rotate(${valRotate_1900})` : '');
+    anim_1900 = anim_1900.trim();
+    let anim_2000 = (valX_2000 ? ` translateX(${valX_2000})` : '') + (valY_2000 ? ` translateY(${valY_2000})` : '') + (valScale_2000 ? ` scale(${valScale_2000})` : '') + (valRotate_2000 ? ` rotate(${valRotate_2000})` : '');
+    anim_2000 = anim_2000.trim();
+    let anim_2100 = (valX_2100 ? ` translateX(${valX_2100})` : '') + (valY_2100 ? ` translateY(${valY_2100})` : '') + (valScale_2100 ? ` scale(${valScale_2100})` : '') + (valRotate_2100 ? ` rotate(${valRotate_2100})` : '');
+    anim_2100 = anim_2100.trim();
+    let anim_2200 = (valX_2200 ? ` translateX(${valX_2200})` : '') + (valY_2200 ? ` translateY(${valY_2200})` : '') + (valScale_2200 ? ` scale(${valScale_2200})` : '') + (valRotate_2200 ? ` rotate(${valRotate_2200})` : '');
+    anim_2200 = anim_2200.trim();
+    let anim_2300 = (valX_2300 ? ` translateX(${valX_2300})` : '') + (valY_2300 ? ` translateY(${valY_2300})` : '') + (valScale_2300 ? ` scale(${valScale_2300})` : '') + (valRotate_2300 ? ` rotate(${valRotate_2300})` : '');
+    anim_2300 = anim_2300.trim();
+    let anim_2400 = (valX_2400 ? ` translateX(${valX_2400})` : '') + (valY_2400 ? ` translateY(${valY_2400})` : '') + (valScale_2400 ? ` scale(${valScale_2400})` : '') + (valRotate_2400 ? ` rotate(${valRotate_2400})` : '');
+    anim_2400 = anim_2400.trim();
+    let anim_2500 = (valX_2500 ? ` translateX(${valX_2500})` : '') + (valY_2500 ? ` translateY(${valY_2500})` : '') + (valScale_2500 ? ` scale(${valScale_2500})` : '') + (valRotate_2500 ? ` rotate(${valRotate_2500})` : '');
+    anim_2500 = anim_2500.trim();
+    let anim_2600 = (valX_2600 ? ` translateX(${valX_2600})` : '') + (valY_2600 ? ` translateY(${valY_2600})` : '') + (valScale_2600 ? ` scale(${valScale_2600})` : '') + (valRotate_2600 ? ` rotate(${valRotate_2600})` : '');
+    anim_2600 = anim_2600.trim();
+    let anim_2700 = (valX_2700 ? ` translateX(${valX_2700})` : '') + (valY_2700 ? ` translateY(${valY_2700})` : '') + (valScale_2700 ? ` scale(${valScale_2700})` : '') + (valRotate_2700 ? ` rotate(${valRotate_2700})` : '');
+    anim_2700 = anim_2700.trim();
+    let anim_2800 = (valX_2800 ? ` translateX(${valX_2800})` : '') + (valY_2800 ? ` translateY(${valY_2800})` : '') + (valScale_2800 ? ` scale(${valScale_2800})` : '') + (valRotate_2800 ? ` rotate(${valRotate_2800})` : '');
+    anim_2800 = anim_2800.trim();
+    let s = (anim ? 'transform: ' + anim + ';' : '') + (valOpacity ? `opacity:${valOpacity}` : '');
+    let s_100 = (anim_100 ? 'transform: ' + anim_100 + ';' : '') + (valOpacity_100 ? `opacity:${valOpacity_100}` : '');
+    let s_200 = (anim_200 ? 'transform: ' + anim_200 + ';' : '') + (valOpacity_200 ? `opacity:${valOpacity_200}` : '');
+    let s_300 = (anim_300 ? 'transform: ' + anim_300 + ';' : '') + (valOpacity_300 ? `opacity:${valOpacity_300}` : '');
+    let s_400 = (anim_400 ? 'transform: ' + anim_400 + ';' : '') + (valOpacity_400 ? `opacity:${valOpacity_400}` : '');
+    let s_500 = (anim_500 ? 'transform: ' + anim_500 + ';' : '') + (valOpacity_500 ? `opacity:${valOpacity_500}` : '');
+    let s_600 = (anim_600 ? 'transform: ' + anim_600 + ';' : '') + (valOpacity_600 ? `opacity:${valOpacity_600}` : '');
+    let s_700 = (anim_700 ? 'transform: ' + anim_700 + ';' : '') + (valOpacity_700 ? `opacity:${valOpacity_700}` : '');
+    let s_800 = (anim_800 ? 'transform: ' + anim_800 + ';' : '') + (valOpacity_800 ? `opacity:${valOpacity_800}` : '');
+    let s_900 = (anim_900 ? 'transform: ' + anim_900 + ';' : '') + (valOpacity_900 ? `opacity:${valOpacity_900}` : '');
+    let s_1000 = (anim_1000 ? 'transform: ' + anim_1000 + ';' : '') + (valOpacity_1000 ? `opacity:${valOpacity_1000}` : '');
+    let s_1100 = (anim_1100 ? 'transform: ' + anim_1100 + ';' : '') + (valOpacity_1100 ? `opacity:${valOpacity_1100}` : '');
+    let s_1200 = (anim_1200 ? 'transform: ' + anim_1200 + ';' : '') + (valOpacity_1200 ? `opacity:${valOpacity_1200}` : '');
+    let s_1300 = (anim_1300 ? 'transform: ' + anim_1300 + ';' : '') + (valOpacity_1300 ? `opacity:${valOpacity_1300}` : '');
+    let s_1400 = (anim_1400 ? 'transform: ' + anim_1400 + ';' : '') + (valOpacity_1400 ? `opacity:${valOpacity_1400}` : '');
+    let s_1500 = (anim_1500 ? 'transform: ' + anim_1500 + ';' : '') + (valOpacity_1500 ? `opacity:${valOpacity_1500}` : '');
+    let s_1600 = (anim_1600 ? 'transform: ' + anim_1600 + ';' : '') + (valOpacity_1600 ? `opacity:${valOpacity_1600}` : '');
+    let s_1700 = (anim_1700 ? 'transform: ' + anim_1700 + ';' : '') + (valOpacity_1700 ? `opacity:${valOpacity_1700}` : '');
+    let s_1800 = (anim_1800 ? 'transform: ' + anim_1800 + ';' : '') + (valOpacity_1800 ? `opacity:${valOpacity_1800}` : '');
+    let s_1900 = (anim_1900 ? 'transform: ' + anim_1900 + ';' : '') + (valOpacity_1900 ? `opacity:${valOpacity_1900}` : '');
+    let s_2000 = (anim_2000 ? 'transform: ' + anim_2000 + ';' : '') + (valOpacity_2000 ? `opacity:${valOpacity_2000}` : '');
+    let s_2100 = (anim_2100 ? 'transform: ' + anim_2100 + ';' : '') + (valOpacity_2100 ? `opacity:${valOpacity_2100}` : '');
+    let s_2200 = (anim_2200 ? 'transform: ' + anim_2200 + ';' : '') + (valOpacity_2200 ? `opacity:${valOpacity_2200}` : '');
+    let s_2300 = (anim_2300 ? 'transform: ' + anim_2300 + ';' : '') + (valOpacity_2300 ? `opacity:${valOpacity_2300}` : '');
+    let s_2400 = (anim_2400 ? 'transform: ' + anim_2400 + ';' : '') + (valOpacity_2400 ? `opacity:${valOpacity_2400}` : '');
+    let s_2500 = (anim_2500 ? 'transform: ' + anim_2500 + ';' : '') + (valOpacity_2500 ? `opacity:${valOpacity_2500}` : '');
+    let s_2600 = (anim_2600 ? 'transform: ' + anim_2600 + ';' : '') + (valOpacity_2600 ? `opacity:${valOpacity_2600}` : '');
+    let s_2700 = (anim_2700 ? 'transform: ' + anim_2700 + ';' : '') + (valOpacity_2700 ? `opacity:${valOpacity_2700}` : '');
+    let s_2800 = (anim_2800 ? 'transform: ' + anim_2800 + ';' : '') + (valOpacity_2800 ? `opacity:${valOpacity_2800}` : '');
+    this.builder.editor.saveForUndo();
+    let device = this.getDevice();
+
+    if (device === 'md') {
+      // 970-1280
+      if (s !== '') activeElement.setAttribute('data-md-t', s);else activeElement.removeAttribute('data-md-t');
+      if (s_100 !== '') activeElement.setAttribute('data-md-t-100', s_100);else activeElement.removeAttribute('data-md-t-100');
+      if (s_200 !== '') activeElement.setAttribute('data-md-t-200', s_200);else activeElement.removeAttribute('data-md-t-200');
+      if (s_300 !== '') activeElement.setAttribute('data-md-t-300', s_300);else activeElement.removeAttribute('data-md-t-300');
+      if (s_400 !== '') activeElement.setAttribute('data-md-t-400', s_400);else activeElement.removeAttribute('data-md-t-400');
+      if (s_500 !== '') activeElement.setAttribute('data-md-t-500', s_500);else activeElement.removeAttribute('data-md-t-500');
+      if (s_600 !== '') activeElement.setAttribute('data-md-t-600', s_600);else activeElement.removeAttribute('data-md-t-600');
+      if (s_700 !== '') activeElement.setAttribute('data-md-t-700', s_700);else activeElement.removeAttribute('data-md-t-700');
+      if (s_800 !== '') activeElement.setAttribute('data-md-t-800', s_800);else activeElement.removeAttribute('data-md-t-800');
+      if (s_900 !== '') activeElement.setAttribute('data-md-t-900', s_900);else activeElement.removeAttribute('data-md-t-900');
+      if (s_1000 !== '') activeElement.setAttribute('data-md-t-1000', s_1000);else activeElement.removeAttribute('data-md-t-1000');
+      if (s_1100 !== '') activeElement.setAttribute('data-md-t-1100', s_1100);else activeElement.removeAttribute('data-md-t-1100');
+      if (s_1200 !== '') activeElement.setAttribute('data-md-t-1200', s_1200);else activeElement.removeAttribute('data-md-t-1200');
+      if (s_1300 !== '') activeElement.setAttribute('data-md-t-1300', s_1300);else activeElement.removeAttribute('data-md-t-1300');
+      if (s_1400 !== '') activeElement.setAttribute('data-md-t-1400', s_1400);else activeElement.removeAttribute('data-md-t-1400');
+      if (s_1500 !== '') activeElement.setAttribute('data-md-t-1500', s_1500);else activeElement.removeAttribute('data-md-t-1500');
+      if (s_1600 !== '') activeElement.setAttribute('data-md-t-1600', s_1600);else activeElement.removeAttribute('data-md-t-1600');
+      if (s_1700 !== '') activeElement.setAttribute('data-md-t-1700', s_1700);else activeElement.removeAttribute('data-md-t-1700');
+      if (s_1800 !== '') activeElement.setAttribute('data-md-t-1800', s_1800);else activeElement.removeAttribute('data-md-t-1800');
+      if (s_1900 !== '') activeElement.setAttribute('data-md-t-1900', s_1900);else activeElement.removeAttribute('data-md-t-1900');
+      if (s_2000 !== '') activeElement.setAttribute('data-md-t-2000', s_2000);else activeElement.removeAttribute('data-md-t-2000');
+      if (s_2100 !== '') activeElement.setAttribute('data-md-t-2100', s_2100);else activeElement.removeAttribute('data-md-t-2100');
+      if (s_2200 !== '') activeElement.setAttribute('data-md-t-2200', s_2200);else activeElement.removeAttribute('data-md-t-2200');
+      if (s_2300 !== '') activeElement.setAttribute('data-md-t-2300', s_2300);else activeElement.removeAttribute('data-md-t-2300');
+      if (s_2400 !== '') activeElement.setAttribute('data-md-t-2400', s_2400);else activeElement.removeAttribute('data-md-t-2400');
+      if (s_2500 !== '') activeElement.setAttribute('data-md-t-2500', s_2500);else activeElement.removeAttribute('data-md-t-2500');
+      if (s_2600 !== '') activeElement.setAttribute('data-md-t-2600', s_2600);else activeElement.removeAttribute('data-md-t-2600');
+      if (s_2700 !== '') activeElement.setAttribute('data-md-t-2700', s_2700);else activeElement.removeAttribute('data-md-t-2700');
+      if (s_2800 !== '') activeElement.setAttribute('data-md-t-2800', s_2800);else activeElement.removeAttribute('data-md-t-2800');
+    } else if (device === 'sm') {
+      // <970
+      if (s !== '') activeElement.setAttribute('data-sm-t', s);else activeElement.removeAttribute('data-sm-t');
+      if (s_100 !== '') activeElement.setAttribute('data-sm-t-100', s_100);else activeElement.removeAttribute('data-sm-t-100');
+      if (s_200 !== '') activeElement.setAttribute('data-sm-t-200', s_200);else activeElement.removeAttribute('data-sm-t-200');
+      if (s_300 !== '') activeElement.setAttribute('data-sm-t-300', s_300);else activeElement.removeAttribute('data-sm-t-300');
+      if (s_400 !== '') activeElement.setAttribute('data-sm-t-400', s_400);else activeElement.removeAttribute('data-sm-t-400');
+      if (s_500 !== '') activeElement.setAttribute('data-sm-t-500', s_500);else activeElement.removeAttribute('data-sm-t-500');
+      if (s_600 !== '') activeElement.setAttribute('data-sm-t-600', s_600);else activeElement.removeAttribute('data-sm-t-600');
+      if (s_700 !== '') activeElement.setAttribute('data-sm-t-700', s_700);else activeElement.removeAttribute('data-sm-t-700');
+      if (s_800 !== '') activeElement.setAttribute('data-sm-t-800', s_800);else activeElement.removeAttribute('data-sm-t-800');
+      if (s_900 !== '') activeElement.setAttribute('data-sm-t-900', s_900);else activeElement.removeAttribute('data-sm-t-900');
+      if (s_1000 !== '') activeElement.setAttribute('data-sm-t-1000', s_1000);else activeElement.removeAttribute('data-sm-t-1000');
+      if (s_1100 !== '') activeElement.setAttribute('data-sm-t-1100', s_1100);else activeElement.removeAttribute('data-sm-t-1100');
+      if (s_1200 !== '') activeElement.setAttribute('data-sm-t-1200', s_1200);else activeElement.removeAttribute('data-sm-t-1200');
+      if (s_1300 !== '') activeElement.setAttribute('data-sm-t-1300', s_1300);else activeElement.removeAttribute('data-sm-t-1300');
+      if (s_1400 !== '') activeElement.setAttribute('data-sm-t-1400', s_1400);else activeElement.removeAttribute('data-sm-t-1400');
+      if (s_1500 !== '') activeElement.setAttribute('data-sm-t-1500', s_1500);else activeElement.removeAttribute('data-sm-t-1500');
+      if (s_1600 !== '') activeElement.setAttribute('data-sm-t-1600', s_1600);else activeElement.removeAttribute('data-sm-t-1600');
+      if (s_1700 !== '') activeElement.setAttribute('data-sm-t-1700', s_1700);else activeElement.removeAttribute('data-sm-t-1700');
+      if (s_1800 !== '') activeElement.setAttribute('data-sm-t-1800', s_1800);else activeElement.removeAttribute('data-sm-t-1800');
+      if (s_1900 !== '') activeElement.setAttribute('data-sm-t-1900', s_1900);else activeElement.removeAttribute('data-sm-t-1900');
+      if (s_2000 !== '') activeElement.setAttribute('data-sm-t-2000', s_2000);else activeElement.removeAttribute('data-sm-t-2000');
+      if (s_2100 !== '') activeElement.setAttribute('data-sm-t-2100', s_2100);else activeElement.removeAttribute('data-sm-t-2100');
+      if (s_2200 !== '') activeElement.setAttribute('data-sm-t-2200', s_2200);else activeElement.removeAttribute('data-sm-t-2200');
+      if (s_2300 !== '') activeElement.setAttribute('data-sm-t-2300', s_2300);else activeElement.removeAttribute('data-sm-t-2300');
+      if (s_2400 !== '') activeElement.setAttribute('data-sm-t-2400', s_2400);else activeElement.removeAttribute('data-sm-t-2400');
+      if (s_2500 !== '') activeElement.setAttribute('data-sm-t-2500', s_2500);else activeElement.removeAttribute('data-sm-t-2500');
+      if (s_2600 !== '') activeElement.setAttribute('data-sm-t-2600', s_2600);else activeElement.removeAttribute('data-sm-t-2600');
+      if (s_2700 !== '') activeElement.setAttribute('data-sm-t-2700', s_2700);else activeElement.removeAttribute('data-sm-t-2700');
+      if (s_2800 !== '') activeElement.setAttribute('data-sm-t-2800', s_2800);else activeElement.removeAttribute('data-sm-t-2800');
+    } else {
+      // >1280
+      if (s !== '') activeElement.setAttribute('data-t', s);else activeElement.removeAttribute('data-t');
+      if (s_100 !== '') activeElement.setAttribute('data-t-100', s_100);else activeElement.removeAttribute('data-t-100');
+      if (s_200 !== '') activeElement.setAttribute('data-t-200', s_200);else activeElement.removeAttribute('data-t-200');
+      if (s_300 !== '') activeElement.setAttribute('data-t-300', s_300);else activeElement.removeAttribute('data-t-300');
+      if (s_400 !== '') activeElement.setAttribute('data-t-400', s_400);else activeElement.removeAttribute('data-t-400');
+      if (s_500 !== '') activeElement.setAttribute('data-t-500', s_500);else activeElement.removeAttribute('data-t-500');
+      if (s_600 !== '') activeElement.setAttribute('data-t-600', s_600);else activeElement.removeAttribute('data-t-600');
+      if (s_700 !== '') activeElement.setAttribute('data-t-700', s_700);else activeElement.removeAttribute('data-t-700');
+      if (s_800 !== '') activeElement.setAttribute('data-t-800', s_800);else activeElement.removeAttribute('data-t-800');
+      if (s_900 !== '') activeElement.setAttribute('data-t-900', s_900);else activeElement.removeAttribute('data-t-900');
+      if (s_1000 !== '') activeElement.setAttribute('data-t-1000', s_1000);else activeElement.removeAttribute('data-t-1000');
+      if (s_1100 !== '') activeElement.setAttribute('data-t-1100', s_1100);else activeElement.removeAttribute('data-t-1100');
+      if (s_1200 !== '') activeElement.setAttribute('data-t-1200', s_1200);else activeElement.removeAttribute('data-t-1200');
+      if (s_1300 !== '') activeElement.setAttribute('data-t-1300', s_1300);else activeElement.removeAttribute('data-t-1300');
+      if (s_1400 !== '') activeElement.setAttribute('data-t-1400', s_1400);else activeElement.removeAttribute('data-t-1400');
+      if (s_1500 !== '') activeElement.setAttribute('data-t-1500', s_1500);else activeElement.removeAttribute('data-t-1500');
+      if (s_1600 !== '') activeElement.setAttribute('data-t-1600', s_1600);else activeElement.removeAttribute('data-t-1600');
+      if (s_1700 !== '') activeElement.setAttribute('data-t-1700', s_1700);else activeElement.removeAttribute('data-t-1700');
+      if (s_1800 !== '') activeElement.setAttribute('data-t-1800', s_1800);else activeElement.removeAttribute('data-t-1800');
+      if (s_1900 !== '') activeElement.setAttribute('data-t-1900', s_1900);else activeElement.removeAttribute('data-t-1900');
+      if (s_2000 !== '') activeElement.setAttribute('data-t-2000', s_2000);else activeElement.removeAttribute('data-t-2000');
+      if (s_2100 !== '') activeElement.setAttribute('data-t-2100', s_2100);else activeElement.removeAttribute('data-t-2100');
+      if (s_2200 !== '') activeElement.setAttribute('data-t-2200', s_2200);else activeElement.removeAttribute('data-t-2200');
+      if (s_2300 !== '') activeElement.setAttribute('data-t-2300', s_2300);else activeElement.removeAttribute('data-t-2300');
+      if (s_2400 !== '') activeElement.setAttribute('data-t-2400', s_2400);else activeElement.removeAttribute('data-t-2400');
+      if (s_2500 !== '') activeElement.setAttribute('data-t-2500', s_2500);else activeElement.removeAttribute('data-t-2500');
+      if (s_2600 !== '') activeElement.setAttribute('data-t-2600', s_2600);else activeElement.removeAttribute('data-t-2600');
+      if (s_2700 !== '') activeElement.setAttribute('data-t-2700', s_2700);else activeElement.removeAttribute('data-t-2700');
+      if (s_2800 !== '') activeElement.setAttribute('data-t-2800', s_2800);else activeElement.removeAttribute('data-t-2800');
+    }
+
+    activeElement.style.transform = '';
+    activeElement.style.transition = '';
+    activeElement.style.opacity = '';
+    const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
+
+    if (btnDisableSmoothAnim.classList.contains('on')) {
+      activeElement.setAttribute('data-smooth-scrolling', 'off');
+    } else {
+      activeElement.removeAttribute('data-smooth-scrolling');
+    }
+
+    const btnHiddenOnStart = this.modalTimeline.querySelector('.cmd-hidden-onstart');
+
+    if (btnHiddenOnStart.classList.contains('on')) {
+      activeElement.setAttribute('data-hidden-onstart', '');
+    } else {
+      activeElement.removeAttribute('data-hidden-onstart');
+    }
+
+    if (this.builder.win.skrollrr) {
+      this.builder.win.skrollrr.refresh();
+    } //Trigger Change event
+
+
+    this.builder.settings.onChange();
+  }
+
+  cleanup(activeElement) {
+    let device = this.getDevice();
+
+    if (device === 'md') {
+      // 970-1280
+      activeElement.removeAttribute('data-md-t');
+      activeElement.removeAttribute('data-md-t-100');
+      activeElement.removeAttribute('data-md-t-200');
+      activeElement.removeAttribute('data-md-t-300');
+      activeElement.removeAttribute('data-md-t-400');
+      activeElement.removeAttribute('data-md-t-500');
+      activeElement.removeAttribute('data-md-t-600');
+      activeElement.removeAttribute('data-md-t-700');
+      activeElement.removeAttribute('data-md-t-800');
+      activeElement.removeAttribute('data-md-t-900');
+      activeElement.removeAttribute('data-md-t-1000');
+      activeElement.removeAttribute('data-md-t-1100');
+      activeElement.removeAttribute('data-md-t-1200');
+      activeElement.removeAttribute('data-md-t-1300');
+      activeElement.removeAttribute('data-md-t-1400');
+      activeElement.removeAttribute('data-md-t-1500');
+      activeElement.removeAttribute('data-md-t-1600');
+      activeElement.removeAttribute('data-md-t-1700');
+      activeElement.removeAttribute('data-md-t-1800');
+      activeElement.removeAttribute('data-md-t-1900');
+      activeElement.removeAttribute('data-md-t-2000');
+      activeElement.removeAttribute('data-md-t-2100');
+      activeElement.removeAttribute('data-md-t-2200');
+      activeElement.removeAttribute('data-md-t-2300');
+      activeElement.removeAttribute('data-md-t-2400');
+      activeElement.removeAttribute('data-md-t-2500');
+      activeElement.removeAttribute('data-md-t-2600');
+      activeElement.removeAttribute('data-md-t-2700');
+      activeElement.removeAttribute('data-md-t-2800');
+    } else if (device === 'sm') {
+      // <970
+      activeElement.removeAttribute('data-sm-t');
+      activeElement.removeAttribute('data-sm-t-100');
+      activeElement.removeAttribute('data-sm-t-200');
+      activeElement.removeAttribute('data-sm-t-300');
+      activeElement.removeAttribute('data-sm-t-400');
+      activeElement.removeAttribute('data-sm-t-500');
+      activeElement.removeAttribute('data-sm-t-600');
+      activeElement.removeAttribute('data-sm-t-700');
+      activeElement.removeAttribute('data-sm-t-800');
+      activeElement.removeAttribute('data-sm-t-900');
+      activeElement.removeAttribute('data-sm-t-1000');
+      activeElement.removeAttribute('data-sm-t-1100');
+      activeElement.removeAttribute('data-sm-t-1200');
+      activeElement.removeAttribute('data-sm-t-1300');
+      activeElement.removeAttribute('data-sm-t-1400');
+      activeElement.removeAttribute('data-sm-t-1500');
+      activeElement.removeAttribute('data-sm-t-1600');
+      activeElement.removeAttribute('data-sm-t-1700');
+      activeElement.removeAttribute('data-sm-t-1800');
+      activeElement.removeAttribute('data-sm-t-1900');
+      activeElement.removeAttribute('data-sm-t-2000');
+      activeElement.removeAttribute('data-sm-t-2100');
+      activeElement.removeAttribute('data-sm-t-2200');
+      activeElement.removeAttribute('data-sm-t-2300');
+      activeElement.removeAttribute('data-sm-t-2400');
+      activeElement.removeAttribute('data-sm-t-2500');
+      activeElement.removeAttribute('data-sm-t-2600');
+      activeElement.removeAttribute('data-sm-t-2700');
+      activeElement.removeAttribute('data-sm-t-2800');
+    } else {
+      // >1280
+      activeElement.removeAttribute('data-t');
+      activeElement.removeAttribute('data-t-100');
+      activeElement.removeAttribute('data-t-200');
+      activeElement.removeAttribute('data-t-300');
+      activeElement.removeAttribute('data-t-400');
+      activeElement.removeAttribute('data-t-500');
+      activeElement.removeAttribute('data-t-600');
+      activeElement.removeAttribute('data-t-700');
+      activeElement.removeAttribute('data-t-800');
+      activeElement.removeAttribute('data-t-900');
+      activeElement.removeAttribute('data-t-1000');
+      activeElement.removeAttribute('data-t-1100');
+      activeElement.removeAttribute('data-t-1200');
+      activeElement.removeAttribute('data-t-1300');
+      activeElement.removeAttribute('data-t-1400');
+      activeElement.removeAttribute('data-t-1500');
+      activeElement.removeAttribute('data-t-1600');
+      activeElement.removeAttribute('data-t-1700');
+      activeElement.removeAttribute('data-t-1800');
+      activeElement.removeAttribute('data-t-1900');
+      activeElement.removeAttribute('data-t-2000');
+      activeElement.removeAttribute('data-t-2100');
+      activeElement.removeAttribute('data-t-2200');
+      activeElement.removeAttribute('data-t-2300');
+      activeElement.removeAttribute('data-t-2400');
+      activeElement.removeAttribute('data-t-2500');
+      activeElement.removeAttribute('data-t-2600');
+      activeElement.removeAttribute('data-t-2700');
+      activeElement.removeAttribute('data-t-2800');
+    }
+  }
+
+  getDevice() {
+    const btnDevice = this.modalTimeline.querySelector('.input-device.on');
+    let device = btnDevice.getAttribute('data-value');
+    return device;
+  }
+
+  getTarget() {
+    let inpTarget = this.modalTimeline.querySelector('.input-target');
+    let target = inpTarget.value;
+    let activeElement;
+
+    if (target === 'element') {
+      let reCheck = this.readTarget();
+
+      if (reCheck) {
+        if (reCheck.name === 'element') activeElement = this.builder.editor.activeElement;
+        if (reCheck.name === 'inspectedElement') activeElement = this.builder.editor.inspectedElement;else activeElement = this.builder.editor.activeElement;
+      } else {
+        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;
+    }
+
+    if (target === 'overlay') {
+      let overlay;
+      const box = this.builder.doc.querySelector('.box-select');
+      if (box) overlay = box.querySelector('.is-overlay');
+      if (overlay) activeElement = overlay;
+    }
+
+    if (target === 'bg') {
+      let overlayBg;
+      const box = this.builder.doc.querySelector('.box-select');
+      if (box) overlayBg = box.querySelector('.is-overlay-bg');
+      if (overlayBg) activeElement = overlayBg;
+    }
+
+    if (target === 'box') {
+      const box = this.builder.doc.querySelector('.box-select');
+      if (box) activeElement = box;
+    }
+
+    if (target === 'section') {
+      const section = this.builder.doc.querySelector('.section-select');
+      if (section) activeElement = section;
+    }
+
+    return {
+      'element': activeElement ? activeElement : false,
+      'name': target ? target : false
+    };
+  }
+
+  readTarget(s) {
+    if (!s) {
+      // element (inspectedElement first)
+      let activeElement = this.builder.editor.inspectedElement;
+
+      if (!activeElement) {
+        return this.readTarget('bg');
+      }
+
+      if (activeElement.hasAttribute('data-t') || activeElement.hasAttribute('data-t-100') || activeElement.hasAttribute('data-t-200') || activeElement.hasAttribute('data-t-300') || activeElement.hasAttribute('data-t-400') || activeElement.hasAttribute('data-t-500') || activeElement.hasAttribute('data-t-600') || activeElement.hasAttribute('data-t-700') || activeElement.hasAttribute('data-t-800') || activeElement.hasAttribute('data-t-900') || activeElement.hasAttribute('data-t-1000') || activeElement.hasAttribute('data-t-1100') || activeElement.hasAttribute('data-t-1200') || activeElement.hasAttribute('data-t-1300') || activeElement.hasAttribute('data-t-1400') || activeElement.hasAttribute('data-t-1500') || activeElement.hasAttribute('data-t-1600') || activeElement.hasAttribute('data-t-1700') || activeElement.hasAttribute('data-t-1800') || activeElement.hasAttribute('data-t-1900') || activeElement.hasAttribute('data-t-2000') || activeElement.hasAttribute('data-t-2100') || activeElement.hasAttribute('data-t-2200') || activeElement.hasAttribute('data-t-2300') || activeElement.hasAttribute('data-t-2400') || activeElement.hasAttribute('data-t-2500') || activeElement.hasAttribute('data-t-2600') || activeElement.hasAttribute('data-t-2700') || activeElement.hasAttribute('data-t-2800')) {
+        return {
+          'element': activeElement,
+          'name': 'inspectedElement'
+        };
+      } else {
+        return this.readTarget('element');
+      }
+    } else {
+      let activeElement;
+
+      if (s === 'element') {
+        activeElement = this.builder.editor.activeElement;
+      }
+
+      if (s === 'column') {
+        activeElement = this.builder.editor.activeCol;
+      }
+
+      if (s === 'row') {
+        if (this.builder.editor.activeCol) activeElement = this.builder.editor.activeCol.parentNode;
+      }
+
+      if (s === 'container') {
+        if (this.builder.editor.activeCol) activeElement = this.builder.editor.activeCol.parentNode.parentNode;
+      }
+
+      if (s === 'bg') {
+        let overlayBg;
+        const box = this.builder.doc.querySelector('.box-select');
+        if (box) overlayBg = box.querySelector('.is-overlay-bg');
+        if (overlayBg) activeElement = overlayBg;
+      }
+
+      if (s === 'overlay') {
+        let overlay;
+        const box = this.builder.doc.querySelector('.box-select');
+        if (box) overlay = box.querySelector('.is-overlay');
+        if (overlay) activeElement = overlay;
+      }
+
+      if (s === 'box') {
+        const box = this.builder.doc.querySelector('.box-select');
+        if (box) activeElement = box;
+      }
+
+      if (s === 'section') {
+        const section = this.builder.doc.querySelector('.section-select');
+        if (section) activeElement = section;
+      }
+
+      if (!activeElement) {
+        if (s === 'element') return this.readTarget('column');
+        if (s === 'column') return this.readTarget('row');
+        if (s === 'row') return this.readTarget('container');
+        if (s === 'container') return this.readTarget('bg');
+        if (s === 'bg') return this.readTarget('overlay');
+        if (s === 'overlay') return this.readTarget('box');
+        if (s === 'box') return this.readTarget('section');
+        if (s === 'section') return false;
+      }
+
+      if (activeElement.hasAttribute('data-t') || activeElement.hasAttribute('data-t-100') || activeElement.hasAttribute('data-t-200') || activeElement.hasAttribute('data-t-300') || activeElement.hasAttribute('data-t-400') || activeElement.hasAttribute('data-t-500') || activeElement.hasAttribute('data-t-600') || activeElement.hasAttribute('data-t-700') || activeElement.hasAttribute('data-t-800') || activeElement.hasAttribute('data-t-900') || activeElement.hasAttribute('data-t-1000') || activeElement.hasAttribute('data-t-1100') || activeElement.hasAttribute('data-t-1200') || activeElement.hasAttribute('data-t-1300') || activeElement.hasAttribute('data-t-1400') || activeElement.hasAttribute('data-t-1500') || activeElement.hasAttribute('data-t-1600') || activeElement.hasAttribute('data-t-1700') || activeElement.hasAttribute('data-t-1800') || activeElement.hasAttribute('data-t-1900') || activeElement.hasAttribute('data-t-2000') || activeElement.hasAttribute('data-t-2100') || activeElement.hasAttribute('data-t-2200') || activeElement.hasAttribute('data-t-2300') || activeElement.hasAttribute('data-t-2400') || activeElement.hasAttribute('data-t-2500') || activeElement.hasAttribute('data-t-2600') || activeElement.hasAttribute('data-t-2700') || activeElement.hasAttribute('data-t-2800')) {
+        return {
+          'element': activeElement,
+          'name': s
+        };
+      } else {
+        if (s === 'element') return this.readTarget('column');
+        if (s === 'column') return this.readTarget('row');
+        if (s === 'row') return this.readTarget('container');
+        if (s === 'container') return this.readTarget('bg');
+        if (s === 'bg') return this.readTarget('overlay');
+        if (s === 'overlay') return this.readTarget('box');
+        if (s === 'box') return this.readTarget('section');
+        if (s === 'section') return 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)) // eslint-disable-line
+    transform[match[1]] = transform[match[1]] ? transform[match[1]].concat([match[2]]) : [match[2]];
+
+    return transform;
+  }
+
+  edit() {
+    this.builder.wrapperEl.classList.add('hard-select');
+    if (this.builder.activeBox) this.builder.activeBox.classList.add('box-select');
+    if (this.builder.activeSection) this.builder.activeSection.classList.add('section-select'); // Close all opened sidebar
+
+    this.builder.sidebar.closeSidebar();
+    this.modalAnimateScroll.classList.remove('active');
+    this.modalTimeline.classList.add('active'); // this.clickContent();
+    // clean UI for selection only
+
+    this.builder.doc.body.classList.add('selection-only');
+    document.body.classList.add('selection-only');
+    const modalEditBox = this.builderStuff.querySelector('.editbox');
+    modalEditBox.style.display = '';
+    const modalEditSection = this.builderStuff.querySelector('.editsection');
+    modalEditSection.style.display = '';
+  }
+
+  close() {
+    this.modalTimeline.classList.remove('active'); // clean UI for selection only
+
+    this.builder.doc.body.classList.remove('selection-only');
+    document.body.classList.remove('selection-only');
+  }
+
+}
+
 const dom = new Dom$1();
 
 class ContentBox {
@@ -100415,14 +102391,13 @@ class ContentBox {
       try {
         // Built-in onRender
         //Run parts of box(-flex).js
-        this.box(); //Run built-in plugin inside the builder
-
-        setTimeout(() => {
-          if (this.win.skrollr) {
-            let obj = this.win.skrollr.get();
-            if (obj) obj.refresh();
-          }
-        }, 100);
+        this.box(); // //Run built-in plugin inside the builder
+        // setTimeout(()=>{
+        //     if (this.win.skrollr) {
+        //         let obj = this.win.skrollr.get();
+        //         if(obj) obj.refresh();
+        //     }
+        // }, 100);
       } catch (e) {// Do Nothing
       }
     }; //Extend onChange with built-in plugins
@@ -100465,6 +102440,7 @@ class ContentBox {
 
     this.sidebar = new SideBar(this);
     this.animateScroll = new AnimateScroll(this);
+    this.timeline = new Timeline(this);
 
     if (!window.data_basic) {
       dom.addExternalScripts([this.snippetUrl], () => {
@@ -102579,6 +104555,10 @@ class ContentBox {
     this.animateScroll.edit();
   }
 
+  openTimelinePanel() {
+    this.timeline.edit();
+  }
+
   destroy() {
     this.doc.removeEventListener('click', this.doDocumentClick, false);
     if (this.iframe) document.removeEventListener('click', this.doDocumentClick, false);