Merge pull request #10 from wix-playground/customMotion

wip - add custom timing
wix-playground · Dec 1, 2022 · fd267ff · fd267ff
2 parents 3a5b2fa + 1e77bf6
commit fd267ff
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 10 deletions.
diff --git a/motion/customMotion/index.html b/motion/customMotion/index.html
@@ -15,11 +15,11 @@
             <label>
                 Perspective:
                 <input type="text" class="perspectiveInput" onchange="setPerspective(this.value);">
-            </label><br>
-            <!-- <label>
-                <input type="checkbox" class="useWrapper">
-                Use wrapper
-            </label> -->
+            </label>
+            <label>
+                Transform-origin:
+                <input type="text" class="transformOriginInput" onchange="setTransformOrigin(this.value);">
+            </label>
         </div>
         <div class="animationsContainer"></div>
         <button type="button" class="txtBtn" onclick="addAnimation();">Add animation</button>

diff --git a/motion/customMotion/index.js b/motion/customMotion/index.js
@@ -4,13 +4,16 @@ const liveWrapper = document.querySelector('.liveWrapper');
 const generatedKeyframes = document.querySelector('#generatedKeyframes');
 
 const perspectiveInput = document.querySelector('.perspectiveInput');
+const transformOriginInput = document.querySelector('.transformOriginInput');
 
 let data = JSON.parse(localStorage.getItem('animationsData')) || {
     animations: [],
-    perspective: ''
+    perspective: '800px',
+    transformOrigin: ''
 };
 
 perspectiveInput.value = data.perspective;
+transformOriginInput.value = data.transformOrigin;
 let usePerspective = false;
 
 const getSelectProperyElement = (animationIx, keyframeIx, propertyIx, selectedProperty) => {
@@ -108,6 +111,7 @@ const iIcon = (propertyName, propertyFunction) => {
 const selectEasingElement = (animationIx, selectedEase) => {
 
     const allEasing = {
+        custom: 'custom',
         linear: 'linear',
 
         easeInSine: "cubic-bezier(0.12, 0, 0.39, 0)",
@@ -166,7 +170,9 @@ function selectDirectionElement(animationIx, selectedDirection) {
 function clearData() {
     data.animations.splice(0, data.animations.length);
     data.perspective = '800px';
+    data.transformOrigin = '';
     perspectiveInput.value = '800px';
+    transformOriginInput.value = '';
     localStorage.clear();
     addAnimation();
 }
@@ -210,6 +216,7 @@ function addAnimation() {
         duration: 1,
         delay: 0,
         timingFunction: 'linear',
+        customTiming: '',
         iterations: 1,
         direction: 'normal',
         keyframes: [{
@@ -322,6 +329,14 @@ function renderForm() {
                 <div class="animationDataline">
                     Timing function:
                     ${selectEasingElement(animationIx, animation.timingFunction)}
+                    ${animation.timingFunction === 'custom' ? `
+                        <input
+                            type="text"
+                            class="customTimingInput"
+                            value="${animation.customTiming}"
+                            placeholder="cubic-bezier(...)"
+                            onchange="setCustomTiming(${animationIx}, this.value);">
+                    ` : ''}
                 </div>
                 <div class="animationDataline">
                     Direction:
@@ -362,6 +377,11 @@ function setPerspective(v) {
     localStorage.setItem('animationsData', JSON.stringify(data));
 }
 
+function setTransformOrigin(v) {
+    data.transformOrigin = v;
+    localStorage.setItem('animationsData', JSON.stringify(data));
+}
+
 function setAnimationName(animationIx, v) {
     data.animations[animationIx].name = v;
     localStorage.setItem('animationsData', JSON.stringify(data));
@@ -384,6 +404,12 @@ function setIterations(animationIx, v) {
 
 function setTimingFunction(animationIx, e) {
     data.animations[animationIx].timingFunction = e.options[e.selectedIndex].value;
+    renderForm();
+    // localStorage.setItem('animationsData', JSON.stringify(data));
+}
+
+function setCustomTiming(animationIx, v) {
+    data.animations[animationIx].customTiming = v;
     localStorage.setItem('animationsData', JSON.stringify(data));
 }
 
@@ -456,7 +482,7 @@ function runAnimation() {
         const wrapper = document.createElement('div');
         wrapper.classList.add(divs ? 'liveAnimationWrapper' : 'liveAnimationComponent');
 
-        const thisAnimation = `${animation.name} ${animation.duration}s ${animation.delay}s ${animation.iterations === '0' ? 'infinite' : animation.iterations} ${animation.direction || ''} ${animation.timingFunction || ''} both paused`;
+        const thisAnimation = `${animation.name} ${animation.duration}s ${animation.delay}s ${animation.iterations === '0' ? 'infinite' : animation.iterations} ${animation.direction || ''} ${animation.timingFunction  === 'custom' ? animation.customTiming : animation.timingFunction} both paused`;
         console.log(thisAnimation);
 
         wrapper.style.animation = thisAnimation;
@@ -481,7 +507,7 @@ function runAnimation() {
     liveWrapper.appendChild(divs);
 
     if (usePerspective) {
-        liveWrapper.style.perspective = document.querySelector('.perspectiveInput').value;
+        liveWrapper.style.perspective = perspectiveInput.value;
     }
 
     setTimeout(() => {
@@ -591,6 +617,6 @@ function showInfo(propertyName, propertyFunction) {
         ${dialogText[propertyName]?.[propertyFunction]}
         <a href="${dialogLinks[propertyName]}">More info on MDN</a> 
     `;
-    
+
     document.querySelector('.dialog').classList.add('show');
 }
diff --git a/motion/customMotion/style.css b/motion/customMotion/style.css
@@ -78,6 +78,21 @@ input[type=file] {
   border-bottom: 1px solid #777;
   margin-bottom: 1em;
 }
+.perspectiveWrapper label {
+  display: block;
+  -webkit-padding-start: 2em;
+          padding-inline-start: 2em;
+  margin-bottom: 0.5em;
+}
+.perspectiveWrapper input {
+  background: none;
+  color: #ccf;
+  border: none;
+  border-bottom: 1px solid;
+}
+.perspectiveWrapper input:disabled {
+  color: #336;
+}
 
 .animationName {
   display: inline-block;
@@ -101,6 +116,9 @@ input[type=file] {
 .animationDataline input {
   width: 100px;
 }
+.animationDataline .customTimingInput {
+  width: 240px;
+}
 
 .keyframeInput::after {
   display: inline-block;

diff --git a/motion/customMotion/style.css.map b/motion/customMotion/style.css.map
diff --git a/motion/customMotion/style.scss b/motion/customMotion/style.scss
@@ -81,6 +81,23 @@ input[type="file"] {
     padding: 1em 0.25em;
     border-bottom: 1px solid #777;
     margin-bottom: 1em;
+
+    label {
+        display: block;
+        padding-inline-start: 2em;
+        margin-bottom: 0.5em;    
+    }
+
+    input {
+        background: none;
+        color: #ccf;
+        border: none;
+        border-bottom: 1px solid;
+
+        &:disabled {
+            color: #336;
+        }
+    }
 }
 
 .animationName {
@@ -106,6 +123,10 @@ input[type="file"] {
     input {
         width: 100px;
     }
+
+    .customTimingInput {
+        width: 240px
+    }
 }
 
 .keyframeInput::after {