From 80185d12d9064a066cc760ecfc1076622d901c07 Mon Sep 17 00:00:00 2001
From: Maggie Serino <maggie.serino@10up.com>
Date: Mon, 13 Jan 2025 15:22:56 +0100
Subject: [PATCH] TMZ-301 fix zigzag animation duration and delay

---
 .../content/assets/scss/hello-plus-zigzag.scss |  4 ++++
 modules/content/widgets/zig-zag.php            | 18 ++++++++----------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/modules/content/assets/scss/hello-plus-zigzag.scss b/modules/content/assets/scss/hello-plus-zigzag.scss
index 613cbaa..d96a01e 100644
--- a/modules/content/assets/scss/hello-plus-zigzag.scss
+++ b/modules/content/assets/scss/hello-plus-zigzag.scss
@@ -36,6 +36,10 @@
 	--zigzag-animation-delay: 0;
 	--zigzag-animation-duration: 1s;
 
+	--zigzag-animation-duration-slow: 2s;
+	--zigzag-animation-duration-normal: 1s;
+	--zigzag-animation-duration-fast: 0.8s;
+
 	align-items: center;
 	background-color: transparent;
 	display: flex;
diff --git a/modules/content/widgets/zig-zag.php b/modules/content/widgets/zig-zag.php
index 2fd0630..078d98d 100644
--- a/modules/content/widgets/zig-zag.php
+++ b/modules/content/widgets/zig-zag.php
@@ -1046,26 +1046,24 @@ private function add_box_style_section() {
 		);
 
 		$this->add_control(
-			'animation_duration',
+			'zigzag_animation_duration',
 			[
 				'label' => esc_html__( 'Animation Duration', 'hello-plus' ),
 				'type' => Controls_Manager::SELECT,
-				'default' => '',
 				'options' => [
-					'2s' => esc_html__( 'Slow', 'hello-plus' ),
-					'1s' => esc_html__( 'Normal', 'hello-plus' ),
-					'800ms' => esc_html__( 'Fast', 'hello-plus' ),
+					'slow' => esc_html__( 'Slow', 'hello-plus' ),
+					'normal' => esc_html__( 'Normal', 'hello-plus' ),
+					'fast' => esc_html__( 'Fast', 'hello-plus' ),
 				],
+				'default' => 'normal',
 				'selectors' => [
-					'{{WRAPPER}} .ehp-zigzag' => '--zigzag-animation-duration: {{VALUE}};',
+					'{{WRAPPER}} .ehp-zigzag' => '--zigzag-animation-duration: var(--zigzag-animation-duration-{{VALUE}});',
 				],
-				'prefix_class' => 'animated-',
 				'condition' => [
-					'animation!' => '',
+					'zigzag_animation!' => '',
 				],
 			]
 		);
-
 		$this->add_control(
 			'animation_delay',
 			[
@@ -1078,7 +1076,7 @@ private function add_box_style_section() {
 					'{{WRAPPER}} .ehp-zigzag' => '--zigzag-animation-delay: {{VALUE}}ms;',
 				],
 				'condition' => [
-					'animation!' => '',
+					'zigzag_animation!' => '',
 				],
 				'render_type' => 'none',
 				'frontend_available' => true,