fancoolo-fx 1.7.1 → 1.8.5

package/CHANGELOG.md

@@ -0,0 +1,74 @@
+# Fancoolo FX — Changelog
+
+## 1.8.3
+_(current release)_
+
+## 1.8.2
+- **Fix:** `textReveal` now detects containers with block-level children (divs, sections, forms) and only splits text-bearing elements (h1–h6, p, blockquote, etc.) — prevents breakage of interactive widgets like accordions, tabs, and sliders
+
+## 1.8.1
+- **Fix:** Removed `split.revert()` calls from `textReveal`, `typeWriter`, and `splitWords` — revert destroys JS state (event listeners, injected DOM) added after SplitText ran
+- **Fix:** `textReveal` resize re-splitting fully handled by `autoSplit`, no manual revert needed
+
+## 1.8.0
+- **Refactor:** `textReveal` uses native SplitText `autoSplit`, `mask: "lines"`, and `onSplit` — removes manual overflow wrappers and resize handler
+- **Refactor:** Responsive and reduced-motion handling via `gsap.matchMedia()` — animations auto-revert when conditions change
+- **Refactor:** Idempotent `init()` using persistent WeakSet — safe to call multiple times without double-animating
+- **Refactor:** Scrub effects (`tiltIn`, `parallax`, `drawSVG` scrub) routed through `buildScrollTrigger()` — now support debug markers and `fx-start-[...]` overrides
+- **Removed:** Manual resize listener, `_splitRegistry`, `document.fonts.ready` blocking — all handled natively by GSAP
+- **Enhancement:** `FX.refresh()` simplified to `ScrollTrigger.refresh()`
+
+## 1.7.1
+- **Fix:** FOUC prevention — all effects now use `autoAlpha` instead of `opacity`; elements start with `visibility:hidden` and are revealed by GSAP
+- **New:** WordPress plugin injects `visibility:hidden` CSS automatically in the head
+- **New:** Text-based effects set parent visibility before animating children to prevent flash
+- **Enhancement:** `clipUp`/`clipDown` now include `autoAlpha` for consistent FOUC handling
+
+## 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.6.1
+- **Refactor:** Split plugin into namespaced classes under `inc/` with `FancooloFX` namespace
+  - `Settings.php`, `Frontend.php`, `Editor.php`, `Admin.php`, `AdminPage.php`, `SaveHandler.php`
+- **New:** Integrated dPlugins self-hoster update checker
+- Updated release workflow to use `rsync` + `.distignore` pattern
+
+## 1.6.0
+- **New:** Gutenberg inspector panel — "FX Animation" added to every block's sidebar
+  - Effect dropdown with all 15 effects
+  - Trigger toggle: Item (scroll) / Trigger (section) / Page (load)
+  - Duration, delay, ease, start position modifiers
+  - Parallax Y-shift and `drawSVG` scrub options
+  - Copy/Paste FX between blocks (sidebar + context menu)
+- **New:** Gutenberg integration toggle in plugin settings
+- Build workflow updated to compile editor assets on release
+
+## 1.5.0
+- **New:** 5 additional animation effects (fade-in, blur-in, clip-up, clip-down, slide-left/right, draw-svg, parallax, split-words, type-writer, tilt-in)
+- **New:** Plugin settings page with import/export
+
+## 1.3.0
+- **New:** Settings sidebar in the editor tab
+
+## 1.2.0
+- **New:** `tiltIn` 3D perspective effect (scrub-based)
+
+## 1.1.0
+- **Fix:** Syntax error — `stagger-all` block was outside `init()`
+
+## 1.0.2
+- **Fix:** `-st` scroll trigger
+
+## 1.0.1
+- Version bump
+
+## 1.0.0
+- Initial release
+- 5 animation effects (text-reveal, reveal, spin-reveal, bg-reveal, scale-in)
+- Page load, scroll trigger, and section trigger modes
+- Modifier classes for timing overrides
+- Custom JavaScript editor with CodeMirror
+- Built-in quick reference table

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fancoolo-fx",
-  "version": "1.7.1",
+  "version": "1.8.5",
   "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,21 @@ Yes. Use the `fx-start-[top center]` modifier class, or set `scrollStart` in the
 
 == Changelog ==
 
+= 1.8.2 =
+* Fix: textReveal now detects containers with block-level children (divs, sections, forms) and only splits text-bearing elements (h1-h6, p, blockquote, etc.) — prevents breakage of interactive widgets like accordions, tabs, and sliders
+
+= 1.8.1 =
+* Fix: Removed split.revert() calls from textReveal, typeWriter, and splitWords — revert destroys JS state (event listeners, injected DOM) added after SplitText ran
+* Fix: textReveal resize re-splitting fully handled by autoSplit, no manual revert needed
+
+= 1.8.0 =
+* Refactor: textReveal uses native SplitText `autoSplit`, `mask: "lines"`, and `onSplit` — removes manual overflow wrappers and resize handler
+* Refactor: Responsive and reduced-motion handling via `gsap.matchMedia()` — animations auto-revert when conditions change
+* Refactor: Idempotent `init()` using persistent WeakSet — safe to call multiple times without double-animating
+* Refactor: Scrub effects (tiltIn, parallax, drawSVG scrub) routed through `buildScrollTrigger()` — now support debug markers and `fx-start-[...]` overrides
+* Removed: Manual resize listener, `_splitRegistry`, `document.fonts.ready` blocking — all handled natively by GSAP
+* Enhancement: `FX.refresh()` simplified to `ScrollTrigger.refresh()`
+
 = 1.7.1 =
 * Fix: FOUC prevention — all effects now use autoAlpha instead of opacity, elements start with visibility:hidden and are revealed by GSAP
 * New: WordPress plugin injects visibility:hidden CSS automatically in the head

package/src/fx.js

@@ -109,6 +109,11 @@
         slideIn:     { duration: 1,   ease: 'power3.out' },
     };
 
+    // ── State ───────────────────────────────────
+
+    var _animated = new WeakSet();
+    var _mm = gsap.matchMedia();
+
     // ── Helpers ──────────────────────────────────
 
     function getClassModifier(el, name, fallback) {
@@ -157,90 +162,85 @@
         return st;
     }
 
-    // ── SplitText resize handling ───────────────
-
-    var _splitRegistry = [];
-    var _lastWidth = window.innerWidth;
-    var _resizeTimer;
-
-    function registerSplit(entry) {
-        _splitRegistry.push(entry);
-    }
+    // ── Effects ──────────────────────────────────
 
-    function unregisterSplit(entry) {
-        var idx = _splitRegistry.indexOf(entry);
-        if (idx > -1) _splitRegistry.splice(idx, 1);
+    // Exclude an element from TranslatePress's dynamic (DOM-change) re-translation.
+    // SplitText restructures text into line/word/char spans; TranslatePress's
+    // MutationObserver (trp-translate-dom-changes.js) sees those mutations and
+    // re-translates the fragments, racing with SplitText and flickering the text
+    // between languages. The server already renders the translated text, so the
+    // dynamic pass is redundant here. `data-no-dynamic-translation` is in
+    // TranslatePress's own skip-selector list; it's an inert data attribute when
+    // TranslatePress isn't present.
+    function markNoDynamicTranslation(el) {
+        if (el && el.setAttribute) {
+            el.setAttribute('data-no-dynamic-translation', '');
+        }
     }
 
-    function refreshSplits() {
-        if (_splitRegistry.length === 0) return;
+    function splitTextReveal(target, o, isScroll, triggerEl, opts) {
+        markNoDynamicTranslation(target);
+        SplitText.create(target, {
+            type: 'lines',
+            mask: 'lines',
+            autoSplit: true,
+            onSplit: function (self) {
+                var tweenVars = {
+                    y: '100%',
+                    autoAlpha: 0,
+                    duration: o.duration,
+                    ease: o.ease,
+                    stagger: o.stagger,
+                    delay: o.delay,
+                };
 
-        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;
+                if (isScroll) {
+                    tweenVars.scrollTrigger = buildScrollTrigger(triggerEl, opts.scrollTrigger || {});
+                }
 
-        pending.forEach(function (entry) {
-            entry.effectFn(entry.el, entry.opts);
+                return gsap.from(self.lines, tweenVars);
+            },
         });
-
-        ScrollTrigger.refresh();
     }
 
-    window.addEventListener('resize', function () {
-        if (window.innerWidth === _lastWidth) return;
-        _lastWidth = window.innerWidth;
-        clearTimeout(_resizeTimer);
-        _resizeTimer = setTimeout(refreshSplits, 200);
-    });
-
-    // ── Effects ──────────────────────────────────
+    // Block-level tags whose presence signals a container with interactive children.
+    // When these are found as direct children, SplitText is applied only to
+    // text-bearing siblings to avoid restructuring interactive widgets.
+    var CONTAINER_CHILD_TAGS = /^(DIV|SECTION|ARTICLE|ASIDE|NAV|HEADER|FOOTER|MAIN|FORM|TABLE|DETAILS|FIELDSET)$/;
+    var TEXT_CHILD_TAGS = /^(H[1-6]|P|BLOCKQUOTE|FIGCAPTION|PRE|LABEL)$/;
 
     function textReveal(el, opts) {
         opts = opts || {};
         var o = resolveOptions(el, 'textReveal', opts);
+        var isScroll = opts.trigger === 'scroll' || opts.scrollTrigger;
 
         gsap.set(el, { visibility: 'inherit' });
-        var split = new SplitText(el, { type: 'lines', linesClass: 'line-wrapper' });
-
-        split.lines.forEach(function (line) {
-            var wrapper = document.createElement('div');
-            wrapper.style.overflow = 'hidden';
-            line.parentNode.insertBefore(wrapper, line);
-            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%',
-            autoAlpha: 0,
-            duration: o.duration,
-            ease: o.ease,
-            stagger: o.stagger,
-            delay: o.delay,
-        };
 
-        if (isOneShot) {
-            tweenVars.onComplete = function () {
-                split.revert();
-                unregisterSplit(entry);
-            };
+        // If the element contains block-level children (divs, sections, etc.),
+        // only split text-bearing children to avoid breaking interactive widgets
+        // like accordions, tabs, or sliders inside the same container.
+        var hasBlockChild = false;
+        for (var c = 0; c < el.children.length; c++) {
+            if (CONTAINER_CHILD_TAGS.test(el.children[c].tagName)) {
+                hasBlockChild = true;
+                break;
+            }
         }
 
-        if (opts.trigger === 'scroll' || opts.scrollTrigger) {
-            tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
+        if (hasBlockChild) {
+            var targets = [];
+            for (var t = 0; t < el.children.length; t++) {
+                if (TEXT_CHILD_TAGS.test(el.children[t].tagName)) {
+                    targets.push(el.children[t]);
+                }
+            }
+            targets.forEach(function (textEl) {
+                splitTextReveal(textEl, o, isScroll, el, opts);
+            });
+            return;
         }
 
-        entry.tween = gsap.from(split.lines, tweenVars);
-        registerSplit(entry);
+        splitTextReveal(el, o, isScroll, el, opts);
     }
 
     function reveal(el, opts) {
@@ -400,6 +400,11 @@
         opts = opts || {};
         var o = resolveOptions(el, 'tiltIn', opts);
 
+        var st = buildScrollTrigger(el, opts.scrollTrigger || {});
+        st.end = opts.end || 'top 20%';
+        st.scrub = opts.scrub != null ? opts.scrub : 0.6;
+        delete st.once;
+
         gsap.fromTo(el, {
             rotationX: opts.rotationX != null ? opts.rotationX : 45,
             scale: opts.scale != null ? opts.scale : 0.8,
@@ -412,12 +417,7 @@
             autoAlpha: 1,
             transformPerspective: 1000,
             ease: o.ease,
-            scrollTrigger: {
-                trigger: (opts.scrollTrigger && opts.scrollTrigger.trigger) || el,
-                start: config.scrollStart || 'top 85%',
-                end: opts.end || 'top 20%',
-                scrub: opts.scrub != null ? opts.scrub : 0.6,
-            },
+            scrollTrigger: st,
         });
     }
 
@@ -426,12 +426,10 @@
         var o = resolveOptions(el, 'typeWriter', opts);
 
         gsap.set(el, { visibility: 'inherit' });
+        markNoDynamicTranslation(el);
         var split = new SplitText(el, { type: 'chars' });
         gsap.set(split.chars, { autoAlpha: 0 });
 
-        var isOneShot = !(opts.trigger === 'scroll' || opts.scrollTrigger) || config.scrollOnce;
-        var entry = { el: el, split: split, tween: null, effectFn: typeWriter, opts: opts };
-
         var tweenVars = {
             autoAlpha: 1,
             duration: o.duration,
@@ -440,19 +438,11 @@
             delay: o.delay,
         };
 
-        if (isOneShot) {
-            tweenVars.onComplete = function () {
-                split.revert();
-                unregisterSplit(entry);
-            };
-        }
-
         if (opts.trigger === 'scroll' || opts.scrollTrigger) {
             tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
         }
 
-        entry.tween = gsap.to(split.chars, tweenVars);
-        registerSplit(entry);
+        gsap.to(split.chars, tweenVars);
     }
 
     function drawSVG(el, opts) {
@@ -476,15 +466,15 @@
         // Scrub mode: SVG draws as user scrolls (class fx-scrub-[0.6] or opts.scrub)
         var scrubVal = getClassModifier(el, 'scrub', opts.scrub != null ? opts.scrub : null);
         if (scrubVal !== null) {
+            var st = buildScrollTrigger(el, opts.scrollTrigger || {});
+            st.end = opts.end || 'top 20%';
+            st.scrub = scrubVal === true || scrubVal === 'true' ? true : scrubVal;
+            delete st.once;
+
             gsap.to(paths, {
                 strokeDashoffset: 0,
                 ease: o.ease,
-                scrollTrigger: {
-                    trigger: (opts.scrollTrigger && opts.scrollTrigger.trigger) || el,
-                    start: config.scrollStart || 'top 85%',
-                    end: opts.end || 'top 20%',
-                    scrub: scrubVal === true || scrubVal === 'true' ? true : scrubVal,
-                },
+                scrollTrigger: st,
             });
             return;
         }
@@ -508,17 +498,17 @@
         // Read y from modifier class fx-y-[80] or opts or default 50
         var yShift = getClassModifier(el, 'y', opts.y != null ? opts.y : 50);
 
+        var st = buildScrollTrigger(el, opts.scrollTrigger || {});
+        st.end = opts.end || 'bottom top';
+        st.scrub = opts.scrub != null ? opts.scrub : true;
+        delete st.once;
+
         gsap.fromTo(el, {
             y: -yShift,
         }, {
             y: yShift,
             ease: 'none',
-            scrollTrigger: {
-                trigger: (opts.scrollTrigger && opts.scrollTrigger.trigger) || el,
-                start: config.scrollStart || 'top 85%',
-                end: opts.end || 'bottom top',
-                scrub: opts.scrub != null ? opts.scrub : true,
-            },
+            scrollTrigger: st,
         });
     }
 
@@ -527,11 +517,9 @@
         var o = resolveOptions(el, 'splitWords', opts);
 
         gsap.set(el, { visibility: 'inherit' });
+        markNoDynamicTranslation(el);
         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,
             autoAlpha: 0,
@@ -541,19 +529,11 @@
             delay: o.delay,
         };
 
-        if (isOneShot) {
-            tweenVars.onComplete = function () {
-                split.revert();
-                unregisterSplit(entry);
-            };
-        }
-
         if (opts.trigger === 'scroll' || opts.scrollTrigger) {
             tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
         }
 
-        entry.tween = gsap.from(split.words, tweenVars);
-        registerSplit(entry);
+        gsap.from(split.words, tweenVars);
     }
 
     function slideIn(el, opts) {
@@ -650,7 +630,6 @@
     // ── Init ────────────────────────────────────
 
     function init() {
-        var processed = new Set();
 
         Object.keys(effects).forEach(function (name) {
             var fn = effects[name];
@@ -660,8 +639,9 @@
             plGroups.forEach(function (group) {
                 group = group.filter(function (el) { return !isExcluded(el); });
                 group.forEach(function (el, i) {
+                    if (_animated.has(el)) return;
                     fn(el, { delay: i * 0.15 });
-                    processed.add(el);
+                    _animated.add(el);
                 });
             });
 
@@ -673,12 +653,13 @@
             stGroups.forEach(function (group) {
                 group = group.filter(function (el) { return !isExcluded(el); });
                 group.forEach(function (el, i) {
+                    if (_animated.has(el)) return;
                     fn(el, {
                         trigger: 'scroll',
                         delay: i * 0.15,
                         scrollTrigger: { trigger: el },
                     });
-                    processed.add(el);
+                    _animated.add(el);
                 });
             });
 
@@ -688,18 +669,19 @@
             if (config.sectionSelector) {
                 document.querySelectorAll(config.sectionSelector).forEach(function (section) {
                     var bareEls = Array.from(section.querySelectorAll('.' + name))
-                        .filter(function (el) { return !processed.has(el) && !isExcluded(el); });
+                        .filter(function (el) { return !_animated.has(el) && !isExcluded(el); });
                     if (bareEls.length === 0) return;
 
                     var groups = groupByParent(bareEls);
                     groups.forEach(function (group) {
                         group.forEach(function (el, i) {
+                            if (_animated.has(el)) return;
                             fn(el, {
                                 trigger: 'scroll',
                                 delay: i * 0.15,
                                 scrollTrigger: { trigger: el },
                             });
-                            processed.add(el);
+                            _animated.add(el);
                         });
                     });
                 });
@@ -708,21 +690,21 @@
 
         // 4. Scrub-based effects — always scroll-linked, processed before tagMap.
         document.querySelectorAll('.fx-tilt-in-st, .fx-tilt-in-pl, .fx-tilt-in').forEach(function (el) {
-            if (!processed.has(el) && !isExcluded(el)) {
+            if (!_animated.has(el) && !isExcluded(el)) {
                 tiltIn(el);
-                processed.add(el);
+                _animated.add(el);
             }
         });
         document.querySelectorAll('.fx-parallax-st, .fx-parallax-pl, .fx-parallax').forEach(function (el) {
-            if (!processed.has(el) && !isExcluded(el)) {
+            if (!_animated.has(el) && !isExcluded(el)) {
                 parallax(el);
-                processed.add(el);
+                _animated.add(el);
             }
         });
         document.querySelectorAll('.fx-draw-svg-scrub').forEach(function (el) {
-            if (!processed.has(el) && !isExcluded(el)) {
+            if (!_animated.has(el) && !isExcluded(el)) {
                 drawSVG(el, { scrub: getClassModifier(el, 'scrub', 0.6) });
-                processed.add(el);
+                _animated.add(el);
             }
         });
 
@@ -735,18 +717,19 @@
                     if (!fn) return;
 
                     var els = Array.from(section.querySelectorAll(selector))
-                        .filter(function (el) { return !processed.has(el) && !isExcluded(el); });
+                        .filter(function (el) { return !_animated.has(el) && !isExcluded(el); });
                     if (els.length === 0) return;
 
                     var groups = groupByParent(els);
                     groups.forEach(function (group) {
                         applyScrollGroup(fn, group, section);
-                        group.forEach(function (el) { processed.add(el); });
+                        group.forEach(function (el) { _animated.add(el); });
                     });
                 });
             });
         }
-        // 5. fx-stagger-all-[selector] — target children, effect from sibling class
+
+        // 6. fx-stagger-all-[selector] — target children, effect from sibling class
         //    Requires an effect class on the same element (e.g. fx-reveal-st).
         document.querySelectorAll('[class*="fx-stagger-all-"]').forEach(function (container) {
             // Parse selector from fx-stagger-all-[img,p]
@@ -776,7 +759,7 @@
             var isScroll = container.classList.contains(effectName + '-st') ||
                            container.classList.contains(effectName);
             var children = Array.from(container.querySelectorAll(childSelector))
-                .filter(function (el) { return !processed.has(el); });
+                .filter(function (el) { return !_animated.has(el); });
             if (children.length === 0) return;
 
             children.forEach(function (child, i) {
@@ -786,7 +769,7 @@
                     opts.scrollTrigger = { trigger: child };
                 }
                 effectFn(child, opts);
-                processed.add(child);
+                _animated.add(child);
             });
         });
 
@@ -808,20 +791,38 @@
         if (pre.excludeSelectors !== undefined) config.excludeSelectors = pre.excludeSelectors;
     }
 
+    // Detect the TranslatePress translation editor. It loads the page inside an
+    // iframe with a `trp-edit-translation` URL param. FX must stand down there:
+    // SplitText fragments text into spans (the real string survives only in
+    // aria-label), and its autoSplit ResizeObserver fights TranslatePress's DOM
+    // rewriting — producing an endless re-split flicker and untranslatable blocks.
+    function isTranslationEditor() {
+        try {
+            return /[?&]trp-edit-translation=/.test(window.location.search);
+        } catch (e) {
+            return false;
+        }
+    }
+
     function boot() {
+        if (isTranslationEditor()) return;
+
         applyPreConfig();
 
-        // Skip animations if OS reduced motion is enabled
-        if (config.respectReducedMotion && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-            return;
+        // Build media query from config — animations auto-revert when conditions stop matching
+        var parts = [];
+        if (config.disableMobile) {
+            parts.push('(min-width: ' + (config.mobileBreakpoint + 1) + 'px)');
         }
-
-        // Skip animations on mobile
-        if (config.disableMobile && window.innerWidth <= config.mobileBreakpoint) {
-            return;
+        if (config.respectReducedMotion) {
+            parts.push('(prefers-reduced-motion: no-preference)');
         }
+        var conditions = parts.length > 0 ? parts.join(' and ') : 'all';
 
-        init();
+        _mm.add(conditions, function () {
+            _animated = new WeakSet();
+            init();
+        });
     }
 
     if (document.readyState === 'loading') {
@@ -850,6 +851,6 @@
         splitWords: splitWords,
         slideIn: slideIn,
         init: init,
-        refresh: refreshSplits,
+        refresh: function () { ScrollTrigger.refresh(); },
     };
 })();