fancoolo-fx 1.6.0 → 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.0",
+  "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/",
@@ -14,8 +14,8 @@
   "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",
-    "build": "wp-scripts build src/editor/index.js --output-path=assets/editor",
+    "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",

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,15 +0,0 @@
-src/
-docs/
-skills/
-node_modules/
-package.json
-package-lock.json
-.npmignore
-.gitignore
-.distignore
-.github/
-.claude/
-.nojekyll
-.git/
-CLAUDE.md
-README.md