fancoolo-fx 1.5.0 → 1.6.1

package/.distignore

@@ -1,15 +1,18 @@
-src/
-docs/
-skills/
 node_modules/
-package.json
-package-lock.json
-.npmignore
-.gitignore
+src/
+
+**/.DS_Store
+
 .distignore
+.git/
 .github/
+.gitignore
 .claude/
 .nojekyll
-.git/
+
+docs/
+skills/
+package-lock.json
+package.json
 CLAUDE.md
 README.md

package/inc/Admin.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace FancooloFX;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Admin {
+
+	public static function register_menu() {
+		add_theme_page(
+			'Fancoolo FX',
+			'Fancoolo FX',
+			'edit_theme_options',
+			'fancoolo-fx',
+			array( AdminPage::class, 'render' )
+		);
+	}
+
+	public static function enqueue( $hook ) {
+		if ( 'appearance_page_fancoolo-fx' !== $hook ) {
+			return;
+		}
+
+		wp_enqueue_style( 'fancoolo-fx-admin', FANCOOLO_FX_URL . 'assets/admin.css', array(), FANCOOLO_FX_VERSION );
+		wp_enqueue_script( 'fancoolo-fx-admin', FANCOOLO_FX_URL . 'assets/admin.js', array( 'jquery' ), FANCOOLO_FX_VERSION, true );
+
+		$settings = wp_enqueue_code_editor( array( 'type' => 'text/javascript' ) );
+
+		if ( false !== $settings ) {
+			wp_add_inline_script(
+				'code-editor',
+				sprintf(
+					'jQuery(function($) {
+						if ($("#fancoolo-fx-editor").length) {
+							var editor = wp.codeEditor.initialize($("#fancoolo-fx-editor"), %s);
+							editor.codemirror.on("change", function(cm) {
+								cm.refresh();
+							});
+						}
+					});',
+					wp_json_encode( $settings )
+				)
+			);
+		}
+	}
+}

package/inc/AdminPage.php

@@ -0,0 +1,398 @@
+<?php
+
+namespace FancooloFX;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class AdminPage {
+
+	public static function render() {
+		$custom_file = Settings::get_custom_file_path();
+		$content     = file_exists( $custom_file ) ? file_get_contents( $custom_file ) : '';
+		$s           = Settings::get();
+
+		settings_errors( 'fancoolo_fx' );
+		?>
+	<!-- Styles and scripts enqueued via Admin::enqueue() -->
+
+	<div class="wrap">
+		<h1>Fancoolo FX</h1>
+		<p>
+			GSAP animation wrapper is active. Add <code>.fx-*</code> classes to blocks in Gutenberg
+			and they will animate automatically.
+		</p>
+
+
+		<!-- ── Tabs ── -->
+		<div class="ffx-tabs">
+			<button class="ffx-tab active" data-tab="editor">Editor</button>
+			<button class="ffx-tab" data-tab="config">Config Reference</button>
+			<button class="ffx-tab" data-tab="classes">Classes Reference</button>
+		</div>
+
+		<!-- ═══ Editor Tab ═══ -->
+		<div class="ffx-panel ffx-panel-editor active" data-panel="editor">
+			<form method="post">
+				<?php wp_nonce_field( 'fancoolo_fx_save_action', 'fancoolo_fx_nonce' ); ?>
+
+				<!-- Editor main area -->
+				<div class="ffx-editor-main">
+					<input type="submit" name="fancoolo_fx_save" class="button button-primary ffx-save-btn" value="Save Changes">
+					<textarea
+						id="fancoolo-fx-editor"
+						name="fancoolo_fx_code"
+						rows="20"
+						style="width: 100%; font-family: monospace;"
+					><?php echo esc_textarea( $content ); ?></textarea>
+				</div>
+
+				<!-- Settings sidebar -->
+				<div class="ffx-sidebar">
+					<h3>Settings</h3>
+
+					<label for="ffx-scroll-start">Scroll Start</label>
+					<input type="text" id="ffx-scroll-start" name="fancoolo_fx_scroll_start" value="<?php echo esc_attr( $s['scroll_start'] ); ?>" placeholder="top 85%">
+					<p class="ffx-hint">When scroll animations trigger (e.g. top 85%, top center)</p>
+
+					<label for="ffx-section-selector">Section Selector</label>
+					<input type="text" id="ffx-section-selector" name="fancoolo_fx_section_selector" value="<?php echo esc_attr( $s['section_selector'] ); ?>" placeholder="section">
+					<p class="ffx-hint">Containers for bare-class triggering</p>
+
+					<label for="ffx-exclude-selectors">Exclude Selectors</label>
+					<input type="text" id="ffx-exclude-selectors" name="fancoolo_fx_exclude_selectors" value="<?php echo esc_attr( $s['exclude_selectors'] ); ?>" placeholder=".no-fx, .wp-block-navigation">
+					<p class="ffx-hint">Elements matching these selectors are never animated</p>
+
+					<hr>
+
+					<div class="ffx-toggle">
+						<input type="checkbox" id="ffx-scroll-once" name="fancoolo_fx_scroll_once" value="1" <?php checked( $s['scroll_once'], '1' ); ?>>
+						<label for="ffx-scroll-once">Play once</label>
+					</div>
+					<p class="ffx-hint">Uncheck to replay animations on every scroll</p>
+
+					<div class="ffx-toggle">
+						<input type="checkbox" id="ffx-debug-markers" name="fancoolo_fx_debug_markers" value="1" <?php checked( $s['debug_markers'], '1' ); ?>>
+						<label for="ffx-debug-markers">Debug markers</label>
+					</div>
+					<p class="ffx-hint">Show ScrollTrigger markers (admin only, visitors won't see them)</p>
+
+					<div class="ffx-toggle">
+						<input type="checkbox" id="ffx-disable-mobile" name="fancoolo_fx_disable_mobile" value="1" <?php checked( $s['disable_mobile'], '1' ); ?>>
+						<label for="ffx-disable-mobile">Disable on mobile</label>
+					</div>
+					<div class="ffx-mobile-breakpoint" style="<?php echo $s['disable_mobile'] === '1' ? '' : 'display:none;'; ?>">
+						<label for="ffx-mobile-breakpoint">Breakpoint (px)</label>
+						<input type="text" id="ffx-mobile-breakpoint" name="fancoolo_fx_mobile_breakpoint" value="<?php echo esc_attr( $s['mobile_breakpoint'] ); ?>" placeholder="768" style="width: 80px; margin-bottom: 12px;">
+					</div>
+
+					<div class="ffx-toggle">
+						<input type="checkbox" id="ffx-respect-reduced-motion" name="fancoolo_fx_respect_reduced_motion" value="1" <?php checked( $s['respect_reduced_motion'], '1' ); ?>>
+						<label for="ffx-respect-reduced-motion">Respect reduced motion</label>
+					</div>
+					<p class="ffx-hint">Skip animations when OS has reduced motion enabled</p>
+
+					<label for="ffx-speed-multiplier">Speed Multiplier</label>
+					<select id="ffx-speed-multiplier" name="fancoolo_fx_speed_multiplier" style="width: 100%; margin-bottom: 12px;">
+						<?php foreach ( array( '0.5' => '0.5x (faster)', '0.75' => '0.75x', '1' => '1x (default)', '1.25' => '1.25x', '1.5' => '1.5x', '2' => '2x (slower)' ) as $val => $lbl ) : ?>
+							<option value="<?php echo esc_attr( $val ); ?>" <?php selected( $s['speed_multiplier'], $val ); ?>><?php echo esc_html( $lbl ); ?></option>
+						<?php endforeach; ?>
+					</select>
+
+					<div class="ffx-toggle">
+						<input type="checkbox" id="ffx-gutenberg-panel" name="fancoolo_fx_gutenberg_panel" value="1" <?php checked( $s['gutenberg_panel'], '1' ); ?>>
+						<label for="ffx-gutenberg-panel">Gutenberg integration</label>
+					</div>
+					<p class="ffx-hint">Show FX Animation panel in the block editor sidebar</p>
+
+					<hr>
+
+					<h3>Global Tag Map</h3>
+					<p class="ffx-hint" style="margin-top: -8px;">Auto-animate elements by tag inside sections. No classes needed.</p>
+
+					<div id="ffx-tagmap-rows">
+						<?php foreach ( $s['tag_map'] as $i => $row ) : ?>
+						<div class="ffx-tagmap-row">
+							<input type="text" name="fancoolo_fx_tag_map[<?php echo $i; ?>][selector]" value="<?php echo esc_attr( $row['selector'] ); ?>" placeholder="h1,h2,h3">
+							<select name="fancoolo_fx_tag_map[<?php echo $i; ?>][effect]">
+								<?php foreach ( self::get_effects_list() as $value => $label ) : ?>
+									<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $row['effect'], $value ); ?>><?php echo esc_html( $label ); ?></option>
+								<?php endforeach; ?>
+							</select>
+							<button type="button" class="ffx-tagmap-remove" title="Remove">&times;</button>
+						</div>
+						<?php endforeach; ?>
+					</div>
+					<button type="button" id="ffx-tagmap-add" class="button button-small">+ Add Rule</button>
+
+					<hr>
+
+					<h3>Import / Export</h3>
+					<div class="ffx-import-export">
+						<button type="button" id="ffx-export" class="button button-small" style="width: 100%; margin-bottom: 6px;">Export Settings</button>
+						<button type="button" id="ffx-import-btn" class="button button-small" style="width: 100%; margin-bottom: 6px;">Import Settings</button>
+						<input type="file" id="ffx-import-file" accept=".json" style="display: none;">
+						<button type="button" id="ffx-reset" class="button button-small" style="width: 100%; color: #a00;">Reset to Defaults</button>
+					</div>
+				</div>
+			</form>
+		</div>
+
+		<!-- ═══ Config Reference Tab ═══ -->
+		<div class="ffx-panel" data-panel="config">
+
+			<h3>Config Options</h3>
+			<table class="widefat fixed striped" style="max-width: 700px;">
+				<thead>
+					<tr><th>Option</th><th>Default</th><th>Description</th></tr>
+				</thead>
+				<tbody>
+					<tr><td><code>FX.config.tagMap</code></td><td><code>null</code></td><td>Auto-animate elements by tag/selector — no classes needed</td></tr>
+					<tr><td><code>FX.config.sectionSelector</code></td><td><code>'section'</code></td><td>Containers for bare-class and tagMap triggering</td></tr>
+					<tr><td><code>FX.config.scrollStart</code></td><td><code>'top 85%'</code></td><td>When scroll animations trigger (GSAP ScrollTrigger start format)</td></tr>
+					<tr><td><code>FX.config.scrollOnce</code></td><td><code>true</code></td><td>Play once or replay on every scroll</td></tr>
+					<tr><td><code>FX.config.excludeSelectors</code></td><td><code>''</code></td><td>CSS selectors for elements to never animate</td></tr>
+					<tr><td><code>FX.config.disableMobile</code></td><td><code>false</code></td><td>Skip all animations on mobile</td></tr>
+					<tr><td><code>FX.config.mobileBreakpoint</code></td><td><code>768</code></td><td>Width threshold for mobile detection (px)</td></tr>
+					<tr><td><code>FX.config.speedMultiplier</code></td><td><code>1</code></td><td>Global duration multiplier (0.5 = faster, 2 = slower)</td></tr>
+					<tr><td><code>FX.config.respectReducedMotion</code></td><td><code>true</code></td><td>Skip animations when OS prefers reduced motion</td></tr>
+				</tbody>
+			</table>
+
+			<h3 style="margin-top: 24px;">JS API Functions</h3>
+			<table class="widefat fixed striped" style="max-width: 700px;">
+				<thead>
+					<tr><th>Function</th><th>Description</th></tr>
+				</thead>
+				<tbody>
+					<tr><td><code>FX.textReveal(el, opts)</code></td><td>Split text lines, masked reveal upward</td></tr>
+					<tr><td><code>FX.reveal(el, opts)</code></td><td>Slide up with fade</td></tr>
+					<tr><td><code>FX.spinReveal(el, opts)</code></td><td>Rotate and scale in</td></tr>
+					<tr><td><code>FX.bgReveal(el, opts)</code></td><td>Background slide up</td></tr>
+					<tr><td><code>FX.scaleIn(el, opts)</code></td><td>Scale up with fade</td></tr>
+					<tr><td><code>FX.fadeIn(el, opts)</code></td><td>Opacity + subtle scale, no movement</td></tr>
+					<tr><td><code>FX.blurIn(el, opts)</code></td><td>Fade in while deblurring</td></tr>
+					<tr><td><code>FX.clipUp(el, opts)</code></td><td>Clip-path wipe from bottom</td></tr>
+					<tr><td><code>FX.clipDown(el, opts)</code></td><td>Clip-path wipe from top</td></tr>
+					<tr><td><code>FX.tiltIn(el, opts)</code></td><td>3D perspective reveal (scrub-based)</td></tr>
+					<tr><td><code>FX.typeWriter(el, opts)</code></td><td>Character-by-character typing reveal</td></tr>
+					<tr><td><code>FX.drawSVG(el, opts)</code></td><td>SVG stroke drawing animation</td></tr>
+					<tr><td><code>FX.parallax(el, opts)</code></td><td>Scroll-linked Y parallax shift</td></tr>
+					<tr><td><code>FX.splitWords(el, opts)</code></td><td>Word-by-word fade and slide up</td></tr>
+					<tr><td><code>FX.slideIn(el, opts)</code></td><td>Horizontal slide from left or right</td></tr>
+					<tr><td><code>FX.init()</code></td><td>Re-scan DOM — call after changing any config</td></tr>
+				</tbody>
+			</table>
+
+			<h3 style="margin-top: 24px;">Examples <span style="font-weight:normal;color:#646970;font-size:13px;">(click code to copy)</span></h3>
+
+			<h4 style="margin-top: 16px;">Auto-animate by tag</h4>
+			<div class="ffx-copy-wrap">
+				<button class="ffx-copy-btn" data-target="ex1">Copy</button>
+				<pre class="ffx-pre" id="ex1">FX.config.tagMap = {
+    'h1,h2,h3,h4,h5,h6': 'textReveal',
+    'p,blockquote':       'textReveal',
+    'img,video':          'reveal',
+};
+FX.config.sectionSelector = 'section, .wp-block-group';
+FX.init();</pre>
+			</div>
+
+			<h4 style="margin-top: 16px;">Change scroll trigger position</h4>
+			<div class="ffx-copy-wrap">
+				<button class="ffx-copy-btn" data-target="ex2">Copy</button>
+				<pre class="ffx-pre" id="ex2">FX.config.scrollStart = 'top center';
+FX.init();</pre>
+			</div>
+
+			<h4 style="margin-top: 16px;">Replay animations on re-scroll</h4>
+			<div class="ffx-copy-wrap">
+				<button class="ffx-copy-btn" data-target="ex3">Copy</button>
+				<pre class="ffx-pre" id="ex3">FX.config.scrollOnce = false;
+FX.init();</pre>
+			</div>
+
+			<h4 style="margin-top: 16px;">Compound sequence</h4>
+			<div class="ffx-copy-wrap">
+				<button class="ffx-copy-btn" data-target="ex4">Copy</button>
+				<pre class="ffx-pre" id="ex4">document.addEventListener('DOMContentLoaded', function () {
+    var hero = document.querySelector('.wp-block-cover');
+    if (!hero) return;
+
+    FX.scaleIn(hero, {
+        trigger: 'scroll',
+        scrollTrigger: { trigger: hero }
+    });
+
+    var heading = hero.querySelector('h2');
+    if (heading) {
+        FX.textReveal(heading, {
+            trigger: 'scroll',
+            delay: 0.2,
+            scrollTrigger: { trigger: hero }
+        });
+    }
+});</pre>
+			</div>
+		</div>
+
+		<!-- ═══ Classes Reference Tab ═══ -->
+		<div class="ffx-panel" data-panel="classes">
+
+			<p style="margin-bottom: 16px; color: #646970;">
+				Add these in Gutenberg: select a block &rarr; Advanced &rarr; Additional CSS class(es). Click any class to copy it.
+			</p>
+
+			<?php self::render_classes_reference(); ?>
+		</div>
+
+		<p style="margin-top: 24px; color: #646970;">
+			This code loads after fx.js on the frontend. Leave empty to use defaults only.<br>
+			<strong style="color:#1d2327;">Important:</strong> Always add <code>FX.init();</code> at the end when changing config — it re-scans the page with your new settings.
+		</p>
+		<p style="margin-top: 12px;">
+			<a href="https://krstivoja.github.io/fancoolo-fx/documentation/" target="_blank">
+				Full Documentation &rarr;
+			</a>
+		</p>
+	</div>
+		<?php
+	}
+
+	public static function get_effects_list() {
+		return array(
+			'textReveal' => 'Text Reveal',
+			'reveal'     => 'Reveal',
+			'spinReveal' => 'Spin Reveal',
+			'bgReveal'   => 'BG Reveal',
+			'scaleIn'    => 'Scale In',
+			'fadeIn'     => 'Fade In',
+			'blurIn'     => 'Blur In',
+			'clipUp'     => 'Clip Up',
+			'clipDown'   => 'Clip Down',
+			'tiltIn'     => 'Tilt In',
+			'typeWriter' => 'Type Writer',
+			'drawSVG'    => 'Draw SVG',
+			'parallax'   => 'Parallax',
+			'splitWords' => 'Split Words',
+			'slideIn'    => 'Slide In',
+		);
+	}
+
+	private static function render_classes_reference() {
+		$groups = array(
+			'Text Reveal'    => array(
+				'fx-text-reveal-pl'  => 'Page load — masked line-by-line reveal',
+				'fx-text-reveal-st'  => 'Scroll triggered',
+				'fx-text-reveal'     => 'Auto triggered inside a section',
+			),
+			'Reveal'         => array(
+				'fx-reveal-pl'       => 'Page load — slide up with fade',
+				'fx-reveal-st'       => 'Scroll triggered',
+				'fx-reveal'          => 'Auto triggered inside a section',
+			),
+			'Spin Reveal'    => array(
+				'fx-spin-reveal-pl'  => 'Page load — rotate and scale in',
+				'fx-spin-reveal-st'  => 'Scroll triggered',
+				'fx-spin-reveal'     => 'Auto triggered inside a section',
+			),
+			'BG Reveal'      => array(
+				'fx-bg-reveal-pl'    => 'Page load — background slide up',
+				'fx-bg-reveal-st'    => 'Scroll triggered',
+				'fx-bg-reveal'       => 'Auto triggered inside a section',
+			),
+			'Scale In'       => array(
+				'fx-scale-in-pl'     => 'Page load — scale up with fade',
+				'fx-scale-in-st'     => 'Scroll triggered',
+				'fx-scale-in'        => 'Auto triggered inside a section',
+			),
+			'Fade In'        => array(
+				'fx-fade-in-pl'      => 'Page load — opacity only, no movement',
+				'fx-fade-in-st'      => 'Scroll triggered',
+				'fx-fade-in'         => 'Auto triggered inside a section',
+			),
+			'Blur In'        => array(
+				'fx-blur-in-pl'      => 'Page load — fade in while deblurring',
+				'fx-blur-in-st'      => 'Scroll triggered',
+				'fx-blur-in'         => 'Auto triggered inside a section',
+			),
+			'Clip Reveal'    => array(
+				'fx-clip-up-pl'      => 'Page load — clip-path wipe from bottom',
+				'fx-clip-up-st'      => 'Scroll triggered',
+				'fx-clip-up'         => 'Auto triggered inside a section',
+				'fx-clip-down-pl'    => 'Page load — clip-path wipe from top',
+				'fx-clip-down-st'    => 'Scroll triggered',
+				'fx-clip-down'       => 'Auto triggered inside a section',
+			),
+			'Type Writer'    => array(
+				'fx-type-writer-pl'  => 'Page load — character-by-character typing',
+				'fx-type-writer-st'  => 'Scroll triggered',
+				'fx-type-writer'     => 'Auto triggered inside a section',
+			),
+			'Draw SVG'       => array(
+				'fx-draw-svg-pl'     => 'Page load — SVG stroke drawing animation',
+				'fx-draw-svg-st'     => 'Scroll triggered',
+				'fx-draw-svg'        => 'Auto triggered inside a section',
+				'fx-draw-svg-scrub'  => 'Draws progressively as you scroll (scrub-based)',
+			),
+			'Split Words'    => array(
+				'fx-split-words-pl'  => 'Page load — word-by-word fade and slide',
+				'fx-split-words-st'  => 'Scroll triggered',
+				'fx-split-words'     => 'Auto triggered inside a section',
+			),
+			'Slide In'       => array(
+				'fx-slide-left-pl'   => 'Page load — slide in from left',
+				'fx-slide-left-st'   => 'Scroll triggered — from left',
+				'fx-slide-left'      => 'Auto triggered inside a section — from left',
+				'fx-slide-right-pl'  => 'Page load — slide in from right',
+				'fx-slide-right-st'  => 'Scroll triggered — from right',
+				'fx-slide-right'     => 'Auto triggered inside a section — from right',
+			),
+			'Tilt In|scrub — tied to scroll position' => array(
+				'fx-tilt-in-st'      => '3D perspective reveal linked to scroll',
+				'fx-tilt-in'         => 'Auto triggered inside a section',
+			),
+			'Parallax|scrub — tied to scroll position' => array(
+				'fx-parallax-st'     => 'Parallax Y-shift linked to scroll',
+				'fx-parallax'        => 'Auto triggered inside a section',
+			),
+		);
+
+		foreach ( $groups as $title => $classes ) {
+			$parts = explode( '|', $title );
+			$label = $parts[0];
+			$sub   = isset( $parts[1] ) ? ' <span style="font-weight:normal;color:#646970;font-size:12px;">(' . esc_html( $parts[1] ) . ')</span>' : '';
+			echo '<div class="ffx-group-title">' . esc_html( $label ) . $sub . '</div>';
+			foreach ( $classes as $cls => $desc ) {
+				echo '<div class="ffx-class-row"><code data-copy>' . esc_html( $cls ) . '</code><span class="ffx-desc">' . esc_html( $desc ) . '</span></div>';
+			}
+		}
+
+		// Stagger Children
+		echo '<div class="ffx-group-title" style="margin-top: 20px;">Stagger Children <span style="font-weight:normal;color:#646970;font-size:12px;">(pair with an effect class)</span></div>';
+		$stagger = array(
+			'fx-stagger-all-[img]'    => 'Target all img children — requires effect class',
+			'fx-stagger-all-[img,p]'  => 'Target img and p children',
+			'fx-stagger-all-[.card]'  => 'Target children by CSS class',
+		);
+		foreach ( $stagger as $cls => $desc ) {
+			echo '<div class="ffx-class-row"><code data-copy>' . esc_html( $cls ) . '</code><span class="ffx-desc">' . esc_html( $desc ) . '</span></div>';
+		}
+
+		// Modifiers
+		echo '<div class="ffx-group-title" style="margin-top: 20px;">Modifiers <span style="font-weight:normal;color:#646970;font-size:12px;">(combine with any effect class)</span></div>';
+		$modifiers = array(
+			'fx-duration-[1.5]'       => 'Custom duration (seconds)',
+			'fx-delay-[0.3]'          => 'Delay before animating (seconds)',
+			'fx-stagger-[0.25]'       => 'Delay between staggered siblings',
+			'fx-ease-[power2.inOut]'  => 'GSAP easing function',
+			'fx-start-[top center]'   => 'Scroll trigger start position',
+			'fx-y-[80]'              => 'Parallax Y-shift intensity (parallax only)',
+			'fx-scrub-[0.6]'         => 'Scrub smoothing (drawSVG scrub mode)',
+		);
+		foreach ( $modifiers as $cls => $desc ) {
+			echo '<div class="ffx-class-row"><code data-copy>' . esc_html( $cls ) . '</code><span class="ffx-desc">' . esc_html( $desc ) . '</span></div>';
+		}
+	}
+}

package/inc/Editor.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace FancooloFX;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Editor {
+
+	public static function enqueue() {
+		$s = Settings::get();
+		if ( ! $s['gutenberg_panel'] ) {
+			return;
+		}
+
+		$asset_file = FANCOOLO_FX_PATH . 'assets/editor/index.asset.php';
+		if ( ! file_exists( $asset_file ) ) {
+			return;
+		}
+
+		$asset = include $asset_file;
+		wp_enqueue_script(
+			'fancoolo-fx-editor',
+			FANCOOLO_FX_URL . 'assets/editor/index.js',
+			$asset['dependencies'],
+			$asset['version'],
+			true
+		);
+	}
+}

package/inc/Frontend.php

@@ -0,0 +1,50 @@
+<?php
+
+namespace FancooloFX;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Frontend {
+
+	public static function enqueue() {
+		wp_enqueue_script( 'gsap', FANCOOLO_FX_URL . 'assets/gsap.min.js', array(), '3.14.2', true );
+		wp_enqueue_script( 'gsap-scrolltrigger', FANCOOLO_FX_URL . 'assets/ScrollTrigger.min.js', array( 'gsap' ), '3.14.2', true );
+		wp_enqueue_script( 'gsap-splittext', FANCOOLO_FX_URL . 'assets/SplitText.min.js', array( 'gsap' ), '3.14.2', true );
+		wp_enqueue_script( 'fancoolo-fx', FANCOOLO_FX_URL . 'assets/fx.js', array( 'gsap', 'gsap-scrolltrigger', 'gsap-splittext' ), FANCOOLO_FX_VERSION, true );
+
+		$s      = Settings::get();
+		$config = array(
+			'scrollStart'          => $s['scroll_start'],
+			'scrollOnce'           => (bool) $s['scroll_once'],
+			'sectionSelector'      => $s['section_selector'],
+			'disableMobile'        => (bool) $s['disable_mobile'],
+			'mobileBreakpoint'     => (int) $s['mobile_breakpoint'],
+			'speedMultiplier'      => (float) $s['speed_multiplier'],
+			'respectReducedMotion' => (bool) $s['respect_reduced_motion'],
+			'excludeSelectors'     => $s['exclude_selectors'],
+		);
+
+		if ( ! empty( $s['tag_map'] ) ) {
+			$tag_map_obj = array();
+			foreach ( $s['tag_map'] as $row ) {
+				$tag_map_obj[ $row['selector'] ] = $row['effect'];
+			}
+			$config['tagMap'] = (object) $tag_map_obj;
+		}
+
+		wp_add_inline_script( 'fancoolo-fx', 'window.__FX_CONFIG__ = ' . wp_json_encode( $config ) . ';', 'before' );
+
+		if ( $s['debug_markers'] && is_user_logged_in() && current_user_can( 'manage_options' ) ) {
+			wp_add_inline_script( 'fancoolo-fx', 'window.__FX_DEBUG_MARKERS__ = true;', 'before' );
+		}
+
+		$custom_file = Settings::get_custom_file_path();
+		if ( file_exists( $custom_file ) && filesize( $custom_file ) > 0 ) {
+			$upload_dir = wp_upload_dir();
+			$custom_url = $upload_dir['baseurl'] . '/fancoolo-fx/custom.js';
+			wp_enqueue_script( 'fancoolo-fx-custom', $custom_url, array( 'fancoolo-fx' ), filemtime( $custom_file ), true );
+		}
+	}
+}

package/inc/SaveHandler.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace FancooloFX;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class SaveHandler {
+
+	public static function handle() {
+		if ( ! isset( $_POST['fancoolo_fx_save'] ) ) {
+			return;
+		}
+
+		if ( ! check_admin_referer( 'fancoolo_fx_save_action', 'fancoolo_fx_nonce' ) ) {
+			return;
+		}
+
+		if ( ! current_user_can( 'edit_theme_options' ) ) {
+			return;
+		}
+
+		// Save custom JS file.
+		$content    = isset( $_POST['fancoolo_fx_code'] ) ? wp_unslash( $_POST['fancoolo_fx_code'] ) : '';
+		$upload_dir = wp_upload_dir();
+		$dir        = $upload_dir['basedir'] . '/fancoolo-fx';
+
+		if ( ! file_exists( $dir ) ) {
+			wp_mkdir_p( $dir );
+		}
+
+		file_put_contents( $dir . '/custom.js', $content );
+
+		// Build tag map.
+		$tag_map = array();
+		if ( ! empty( $_POST['fancoolo_fx_tag_map'] ) && is_array( $_POST['fancoolo_fx_tag_map'] ) ) {
+			foreach ( $_POST['fancoolo_fx_tag_map'] as $row ) {
+				$selector = sanitize_text_field( $row['selector'] ?? '' );
+				$effect   = sanitize_text_field( $row['effect'] ?? '' );
+				if ( '' !== $selector && '' !== $effect ) {
+					$tag_map[] = array( 'selector' => $selector, 'effect' => $effect );
+				}
+			}
+		}
+
+		// Save settings.
+		$settings = array(
+			'scroll_start'           => sanitize_text_field( $_POST['fancoolo_fx_scroll_start'] ?? 'top 85%' ),
+			'scroll_once'            => isset( $_POST['fancoolo_fx_scroll_once'] ) ? '1' : '0',
+			'section_selector'       => sanitize_text_field( $_POST['fancoolo_fx_section_selector'] ?? 'section' ),
+			'debug_markers'          => isset( $_POST['fancoolo_fx_debug_markers'] ) ? '1' : '0',
+			'disable_mobile'         => isset( $_POST['fancoolo_fx_disable_mobile'] ) ? '1' : '0',
+			'mobile_breakpoint'      => sanitize_text_field( $_POST['fancoolo_fx_mobile_breakpoint'] ?? '768' ),
+			'speed_multiplier'       => sanitize_text_field( $_POST['fancoolo_fx_speed_multiplier'] ?? '1' ),
+			'respect_reduced_motion' => isset( $_POST['fancoolo_fx_respect_reduced_motion'] ) ? '1' : '0',
+			'exclude_selectors'      => sanitize_text_field( $_POST['fancoolo_fx_exclude_selectors'] ?? '' ),
+			'gutenberg_panel'        => isset( $_POST['fancoolo_fx_gutenberg_panel'] ) ? '1' : '0',
+			'tag_map'                => $tag_map,
+		);
+
+		Settings::save( $settings );
+
+		add_settings_error( 'fancoolo_fx', 'fancoolo_fx_saved', 'Settings saved.', 'success' );
+	}
+}

package/inc/Settings.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace FancooloFX;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Settings {
+
+	private static $defaults = array(
+		'scroll_start'           => 'top 85%',
+		'scroll_once'            => '1',
+		'section_selector'       => 'section',
+		'debug_markers'          => '0',
+		'disable_mobile'         => '0',
+		'mobile_breakpoint'      => '768',
+		'speed_multiplier'       => '1',
+		'respect_reduced_motion' => '1',
+		'exclude_selectors'      => '',
+		'gutenberg_panel'        => '1',
+		'tag_map'                => array(),
+	);
+
+	public static function get_defaults() {
+		return self::$defaults;
+	}
+
+	public static function get() {
+		return wp_parse_args( get_option( 'fancoolo_fx_settings', array() ), self::$defaults );
+	}
+
+	public static function save( $settings ) {
+		update_option( 'fancoolo_fx_settings', $settings );
+	}
+
+	public static function get_custom_file_path() {
+		$upload_dir = wp_upload_dir();
+		return $upload_dir['basedir'] . '/fancoolo-fx/custom.js';
+	}
+}

package/inc/update.php

@@ -0,0 +1,154 @@
+<?php
+// ************************************************************************************************
+// Updater Version: 1.0.2
+// ************************************************************************************************
+
+if (!defined('ABSPATH')) exit; // Exit if accessed directly
+
+if (!class_exists('FANCOOLOFX_DPUpdateChecker')) {
+
+    class FANCOOLOFX_DPUpdateChecker {
+
+        public $slug;
+        public $version;
+        public $cache_key;
+        public $remote_url;
+        public $type;
+
+        public function __construct($slug, $version, $cache_key, $remote_url, $type = 'plugin') {
+            $this->slug = $slug;
+            $this->version = $version;
+            $this->cache_key = $cache_key;
+            $this->remote_url = $remote_url;
+            $this->type = $type;
+            add_action('admin_init', array($this, 'check_update_conditions'));
+            add_action('plugin_row_meta', array($this, 'add_check_updates_button'), 10, 2);add_action('admin_post_check_for_updates', array($this, 'check_for_updates'));
+        }
+
+        public function check_update_conditions() {
+            add_filter('plugins_api', array($this, 'info'), 20, 3);add_filter('site_transient_update_plugins', array($this, 'update_plugins'));
+            add_action('upgrader_process_complete', array($this, 'purge'), 10, 2);
+        }
+
+        public function request() {
+            $remote = get_transient($this->cache_key);
+
+            if (false === $remote) {
+                $response = wp_remote_get(
+                    $this->remote_url,
+                    array(
+                        'timeout' => 10,
+                        'headers' => array('Accept' => 'application/json')
+                    )
+                );
+
+                if (
+                    is_wp_error($response)
+                    || 200 !== wp_remote_retrieve_response_code($response)
+                    || empty(wp_remote_retrieve_body($response))
+                ) {
+                    error_log('Hoster update check error: ' . wp_remote_retrieve_body($response) ?: $response->get_error_message());
+                    return false;
+                }
+
+                $remote = wp_remote_retrieve_body($response);
+                set_transient($this->cache_key, $remote, 6 * HOUR_IN_SECONDS);
+            }
+
+            if(!is_array($remote)){
+                $remote = json_decode($remote);
+            }
+            return $remote;
+        }
+
+        
+        public function info($res, $action, $args) {
+            if ('plugin_information' !== $action || $this->slug !== $args->slug) {
+                return $res;
+            }
+
+            $remote = $this->request();
+            if (!$remote) return $res;
+
+            $res = new stdClass();
+            $res->name = $remote->name;
+            $res->slug = $remote->slug;
+            $res->version = $remote->version;
+            $res->tested = $remote->tested;
+            $res->requires = $remote->requires;
+            $res->author = $remote->author;
+            $res->author_profile = $remote->author_profile;
+            $res->download_link = $remote->download_url;
+            $res->trunk = $remote->download_url;
+            $res->requires_php = $remote->requires_php;
+            $res->last_updated = $remote->last_updated;
+            $res->sections = (array)$remote->sections;
+
+            if (!empty($remote->banners)) {
+                $res->banners = (array)$remote->banners;
+            }
+
+            if (!empty($remote->icons)) {
+                $res->icons = (array)$remote->icons;
+            }
+
+            return $res;
+        }
+
+        public function update_plugins($transient) {
+            if (empty($transient->checked)) return $transient;
+
+            $remote = $this->request();
+            if (!$remote) return $transient;
+
+            if (
+                version_compare($this->version, $remote->version, '<')
+                && version_compare($remote->requires, get_bloginfo('version'), '<=')
+                && version_compare($remote->requires_php, PHP_VERSION, '<=')
+            ) {
+                $res = new stdClass();
+                $res->slug = $this->slug;
+                $res->new_version = $remote->version;
+                $res->tested = $remote->tested;
+                $res->package = $remote->download_url;
+
+                if (!empty($remote->icons)) {
+                    $res->icons = (array)$remote->icons;
+                }
+
+                $res->plugin = $this->slug;
+                $transient->response[$res->plugin] = $res;
+            }
+
+            return $transient;
+        }
+
+        public function add_check_updates_button($plugin_meta, $plugin_file) {
+            if ($plugin_file === $this->slug) {
+                $url = wp_nonce_url(admin_url('admin-post.php?action=check_for_updates&plugin=' . $this->slug), 'check_for_updates');
+                $plugin_meta[] = '<a href="' . esc_url($url) . '">Check for updates</a>';
+            }
+            return $plugin_meta;
+        }
+
+        public function check_for_updates() {
+            if (!current_user_can('update_plugins')) {
+                wp_die(__('You do not have sufficient permissions to update plugins.'));
+            }
+
+            check_admin_referer('check_for_updates');
+            delete_transient($this->cache_key);
+            $this->request();
+            wp_redirect(admin_url('plugins.php'));
+            exit;
+        }
+
+        
+
+        public function purge($upgrader, $options) {
+            if ('update' === $options['action'] && $this->type === $options['type']) {
+                delete_transient($this->cache_key);
+            }
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fancoolo-fx",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "A class-driven GSAP animation wrapper for WordPress and static sites.",
   "main": "src/fx.js",
   "homepage": "https://krstivoja.github.io/fancoolo-fx/",
@@ -14,10 +14,15 @@
   "keywords": ["gsap", "animation", "scrolltrigger", "splittext", "wordpress", "gutenberg"],
   "author": "Fancoolo",
   "scripts": {
-    "sync": "cp src/fx.js assets/fx.js && cp src/fx.js docs/vendor/fx.js"
+    "sync": "cp src/fx.js assets/fx.js && cp src/fx.js docs/vendor/fx.js && cp node_modules/gsap/dist/gsap.min.js assets/gsap.min.js && cp node_modules/gsap/dist/ScrollTrigger.min.js assets/ScrollTrigger.min.js && cp node_modules/gsap/dist/SplitText.min.js assets/SplitText.min.js && cp node_modules/gsap/dist/gsap.min.js docs/vendor/gsap.min.js && cp node_modules/gsap/dist/ScrollTrigger.min.js docs/vendor/ScrollTrigger.min.js && cp node_modules/gsap/dist/SplitText.min.js docs/vendor/SplitText.min.js",
+    "build": "wp-scripts build src/editor/index.js --output-path=assets/editor && npm run sync",
+    "start": "wp-scripts start src/editor/index.js --output-path=assets/editor"
   },
   "license": "ISC",
   "dependencies": {
     "gsap": "^3.14.2"
+  },
+  "devDependencies": {
+    "@wordpress/scripts": "^30.0.0"
   }
 }