Fix motion part 2 (#219)

* fixed transition preview in editor * fixed spring preview svg * build
nk-crew · Dec 17, 2024 · ff9fd2d · ff9fd2d
1 parent 985b441
commit ff9fd2d
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 21 deletions.
diff --git a/build/gutenberg/index.asset.php b/build/gutenberg/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-plugins', 'wp-rich-text', 'wp-token-list'), 'version' => 'b2f2eab55c938b856a45');
+<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-plugins', 'wp-rich-text', 'wp-token-list'), 'version' => '8d8fe3ad459b74554e5a');
diff --git a/build/gutenberg/index.js b/build/gutenberg/index.js
diff --git a/gutenberg/components/transition-preview/index.js b/gutenberg/components/transition-preview/index.js
@@ -36,14 +36,14 @@ export default function TransitionPreview(props) {
 				const animationOptions = {};
 
 				if (opts?.type === 'easing') {
-					animationOptions.easing = opts.easing;
+					animationOptions.type = 'tween';
+					animationOptions.ease = opts.easing;
 					animationOptions.duration = opts.duration;
 				} else if (opts?.type === 'spring') {
-					animationOptions.easing = spring({
-						stiffness: opts.stiffness,
-						damping: opts.damping,
-						mass: opts.mass,
-					});
+					animationOptions.type = spring;
+					animationOptions.stiffness = opts.stiffness;
+					animationOptions.damping = opts.damping;
+					animationOptions.mass = opts.mass;
 				}
 
 				const computedStyle = window.getComputedStyle(

diff --git a/gutenberg/components/transition-spring-controls/index.js b/gutenberg/components/transition-spring-controls/index.js
@@ -59,23 +59,28 @@ export function SpringEditor(props) {
 			stiffness: value?.stiffness,
 			damping: value?.damping,
 			mass: value?.mass,
-		}).createAnimation([0, options.framesLength]);
+			keyframes: [0, options.framesLength],
+		});
 
 		const width = options.width - options.padding * 2;
 		const height = options.height - options.padding * 2;
 
-		const points = springData.keyframes.map((val, i) => {
+		const points = [];
+
+		// const step = 10;
+		for (let i = 0; i <= options.framesLength; i++) {
 			const valuePercent =
-				(options.framesLength - val) / options.framesLength;
-			const framesPercent = i / springData.keyframes.length;
+				(options.framesLength - springData.next(i).value) /
+				options.framesLength;
+			const framesPercent = i / options.framesLength;
 			const x = round(framesPercent * width, 4) + options.padding;
 			const y =
 				round((valuePercent * height) / 2, 4) +
 				height / 2 +
 				options.padding;
 
-			return [x, y];
-		});
+			points.push([x, y]);
+		}
 
 		let newPath = `M${options.padding}`;
 

diff --git a/languages/ghostkit.pot b/languages/ghostkit.pot
@@ -9,7 +9,7 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2024-12-17T13:02:43+00:00\n"
+"POT-Creation-Date: 2024-12-17T17:38:07+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.9.0\n"
 "X-Domain: ghostkit\n"
@@ -2059,7 +2059,7 @@ msgstr ""
 #: gutenberg/blocks/video/edit/inspector-controls.js:258
 #: gutenberg/blocks/video/edit/inspector-controls.js:259
 #: gutenberg/components/transition-easing-controls/index.js:301
-#: gutenberg/components/transition-spring-controls/index.js:240
+#: gutenberg/components/transition-spring-controls/index.js:245
 #: settings/pages/blocks.js:215
 msgid "Preview"
 msgstr ""
@@ -2693,7 +2693,7 @@ msgstr ""
 
 #: gutenberg/components/transition-easing-controls/index.js:117
 #: gutenberg/components/transition-presets-control/index.js:44
-#: gutenberg/components/transition-spring-controls/index.js:153
+#: gutenberg/components/transition-spring-controls/index.js:158
 msgid "-- Presets --"
 msgstr ""
 
@@ -2707,7 +2707,7 @@ msgid "Duration"
 msgstr ""
 
 #: gutenberg/components/transition-easing-controls/index.js:289
-#: gutenberg/components/transition-spring-controls/index.js:228
+#: gutenberg/components/transition-spring-controls/index.js:233
 msgid "Delay"
 msgstr ""
 
@@ -2779,15 +2779,15 @@ msgstr ""
 msgid "Add…"
 msgstr ""
 
-#: gutenberg/components/transition-spring-controls/index.js:198
+#: gutenberg/components/transition-spring-controls/index.js:203
 msgid "Stiffness"
 msgstr ""
 
-#: gutenberg/components/transition-spring-controls/index.js:208
+#: gutenberg/components/transition-spring-controls/index.js:213
 msgid "Damping"
 msgstr ""
 
-#: gutenberg/components/transition-spring-controls/index.js:218
+#: gutenberg/components/transition-spring-controls/index.js:223
 msgid "Mass"
 msgstr ""
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-plugins', 'wp-rich-text', 'wp-token-list'), 'version' => 'b2f2eab55c938b856a45');
		<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-plugins', 'wp-rich-text', 'wp-token-list'), 'version' => '8d8fe3ad459b74554e5a');