fancoolo-fx 1.6.1 → 1.7.0

package/README.md

@@ -159,6 +159,16 @@ All functions accept `(element, options)`:
 
 Set `trigger: 'scroll'` to enable ScrollTrigger. Pass `scrollTrigger: { trigger: someEl }` to use a different trigger element.
 
+### Utility Methods
+
+| Method | Description |
+|--------|-------------|
+| `FX.init()` | Re-scan DOM and apply animations (for dynamic content) |
+| `FX.refresh()` | Re-split text after layout change (sidebar toggle, font load) |
+| `FX.config` | Global config object |
+
+**Resize handling:** Text-based effects (`textReveal`, `typeWriter`, `splitWords`) automatically re-split when the browser width changes. After one-shot animations complete, the SplitText DOM is reverted so text reflows naturally.
+
 ## Using in a New Project
 
 1. Copy this repo (or `npm install`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fancoolo-fx",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "A class-driven GSAP animation wrapper for WordPress and static sites.",
   "main": "src/fx.js",
   "homepage": "https://krstivoja.github.io/fancoolo-fx/",

package/readme.txt

@@ -68,6 +68,12 @@ Yes. Use the `fx-start-[top center]` modifier class, or set `scrollStart` in the
 
 == Changelog ==
 
+= 1.7.0 =
+* Fix: Text-based effects (textReveal, typeWriter, splitWords) now re-split on browser resize — line breaks stay correct at every viewport width
+* New: SplitText is reverted after one-shot animations complete — text reflows naturally without extra DOM wrappers
+* New: FX.refresh() public method — manually re-split text after layout changes (sidebar toggle, font load)
+* New: Automatic debounced resize handler (200ms, width-only) for pending scroll-triggered text animations
+
 = 1.0.0 =
 * Initial release
 * 5 animation effects

package/src/fx.js

@@ -157,6 +157,49 @@
         return st;
     }
 
+    // ── SplitText resize handling ───────────────
+
+    var _splitRegistry = [];
+    var _lastWidth = window.innerWidth;
+    var _resizeTimer;
+
+    function registerSplit(entry) {
+        _splitRegistry.push(entry);
+    }
+
+    function unregisterSplit(entry) {
+        var idx = _splitRegistry.indexOf(entry);
+        if (idx > -1) _splitRegistry.splice(idx, 1);
+    }
+
+    function refreshSplits() {
+        if (_splitRegistry.length === 0) return;
+
+        var pending = [];
+
+        for (var i = _splitRegistry.length - 1; i >= 0; i--) {
+            var entry = _splitRegistry[i];
+            if (entry.tween) entry.tween.kill();
+            if (entry.split) entry.split.revert();
+            pending.push(entry);
+        }
+
+        _splitRegistry.length = 0;
+
+        pending.forEach(function (entry) {
+            entry.effectFn(entry.el, entry.opts);
+        });
+
+        ScrollTrigger.refresh();
+    }
+
+    window.addEventListener('resize', function () {
+        if (window.innerWidth === _lastWidth) return;
+        _lastWidth = window.innerWidth;
+        clearTimeout(_resizeTimer);
+        _resizeTimer = setTimeout(refreshSplits, 200);
+    });
+
     // ── Effects ──────────────────────────────────
 
     function textReveal(el, opts) {
@@ -172,6 +215,9 @@
             wrapper.appendChild(line);
         });
 
+        var isOneShot = !(opts.trigger === 'scroll' || opts.scrollTrigger) || config.scrollOnce;
+        var entry = { el: el, split: split, tween: null, effectFn: textReveal, opts: opts };
+
         var tweenVars = {
             y: '100%',
             opacity: 0,
@@ -179,19 +225,21 @@
             ease: o.ease,
             stagger: o.stagger,
             delay: o.delay,
-            onComplete: function () {
-                split.lines.forEach(function (line) {
-                    line.style.transform = '';
-                    line.style.opacity = '';
-                });
-            },
         };
 
+        if (isOneShot) {
+            tweenVars.onComplete = function () {
+                split.revert();
+                unregisterSplit(entry);
+            };
+        }
+
         if (opts.trigger === 'scroll' || opts.scrollTrigger) {
             tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
         }
 
-        gsap.from(split.lines, tweenVars);
+        entry.tween = gsap.from(split.lines, tweenVars);
+        registerSplit(entry);
     }
 
     function reveal(el, opts) {
@@ -377,6 +425,9 @@
         var split = new SplitText(el, { type: 'chars' });
         gsap.set(split.chars, { opacity: 0 });
 
+        var isOneShot = !(opts.trigger === 'scroll' || opts.scrollTrigger) || config.scrollOnce;
+        var entry = { el: el, split: split, tween: null, effectFn: typeWriter, opts: opts };
+
         var tweenVars = {
             opacity: 1,
             duration: o.duration,
@@ -385,11 +436,19 @@
             delay: o.delay,
         };
 
+        if (isOneShot) {
+            tweenVars.onComplete = function () {
+                split.revert();
+                unregisterSplit(entry);
+            };
+        }
+
         if (opts.trigger === 'scroll' || opts.scrollTrigger) {
             tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
         }
 
-        gsap.to(split.chars, tweenVars);
+        entry.tween = gsap.to(split.chars, tweenVars);
+        registerSplit(entry);
     }
 
     function drawSVG(el, opts) {
@@ -464,6 +523,9 @@
 
         var split = new SplitText(el, { type: 'words' });
 
+        var isOneShot = !(opts.trigger === 'scroll' || opts.scrollTrigger) || config.scrollOnce;
+        var entry = { el: el, split: split, tween: null, effectFn: splitWords, opts: opts };
+
         var tweenVars = {
             y: opts.y != null ? opts.y : 30,
             opacity: 0,
@@ -473,11 +535,19 @@
             delay: o.delay,
         };
 
+        if (isOneShot) {
+            tweenVars.onComplete = function () {
+                split.revert();
+                unregisterSplit(entry);
+            };
+        }
+
         if (opts.trigger === 'scroll' || opts.scrollTrigger) {
             tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
         }
 
-        gsap.from(split.words, tweenVars);
+        entry.tween = gsap.from(split.words, tweenVars);
+        registerSplit(entry);
     }
 
     function slideIn(el, opts) {
@@ -774,5 +844,6 @@
         splitWords: splitWords,
         slideIn: slideIn,
         init: init,
+        refresh: refreshSplits,
     };
 })();

package/.distignore

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

package/inc/Admin.php

@@ -1,48 +0,0 @@
-<?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

@@ -1,398 +0,0 @@
-<?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

@@ -1,31 +0,0 @@
-<?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

@@ -1,50 +0,0 @@
-<?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

@@ -1,66 +0,0 @@
-<?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

@@ -1,41 +0,0 @@
-<?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

@@ -1,154 +0,0 @@
-<?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);
-            }
-        }
-    }
-}