fancoolo-fx 1.0.2 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fancoolo-fx",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "A class-driven GSAP animation wrapper for WordPress and static sites.",
   "main": "src/fx.js",
   "keywords": ["gsap", "animation", "scrolltrigger", "splittext", "wordpress", "gutenberg"],

package/src/fx.js

@@ -84,6 +84,11 @@
         spinReveal:  { duration: 1.4, ease: 'power3.out' },
         bgReveal:    { duration: 1,   ease: 'power3.out' },
         scaleIn:     { duration: 1,   ease: 'power3.out' },
+        fadeIn:      { duration: 1.4, ease: 'power1.out' },
+        blurIn:      { duration: 1.2, ease: 'power2.out' },
+        clipUp:      { duration: 1,   ease: 'power3.inOut' },
+        clipDown:    { duration: 1,   ease: 'power3.inOut' },
+        tiltIn:      { duration: 1.4, ease: 'power3.out' },
     };
 
     // ── Helpers ──────────────────────────────────
@@ -241,6 +246,105 @@
         gsap.from(el, tweenVars);
     }
 
+    function fadeIn(el, opts) {
+        opts = opts || {};
+        var o = resolveOptions(el, 'fadeIn', opts);
+
+        var tweenVars = {
+            opacity: 0,
+            scale: opts.scale != null ? opts.scale : 0.95,
+            duration: o.duration,
+            ease: o.ease,
+            delay: o.delay,
+        };
+
+        if (opts.trigger === 'scroll' || opts.scrollTrigger) {
+            tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
+        }
+
+        gsap.from(el, tweenVars);
+    }
+
+    function blurIn(el, opts) {
+        opts = opts || {};
+        var o = resolveOptions(el, 'blurIn', opts);
+
+        var tweenVars = {
+            filter: 'blur(' + (opts.blur != null ? opts.blur : 12) + 'px)',
+            opacity: 0,
+            duration: o.duration,
+            ease: o.ease,
+            delay: o.delay,
+        };
+
+        if (opts.trigger === 'scroll' || opts.scrollTrigger) {
+            tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
+        }
+
+        gsap.from(el, tweenVars);
+    }
+
+    function clipUp(el, opts) {
+        opts = opts || {};
+        var o = resolveOptions(el, 'clipUp', opts);
+
+        var tweenVars = {
+            clipPath: 'inset(100% 0 0 0)',
+            duration: o.duration,
+            ease: o.ease,
+            delay: o.delay,
+        };
+
+        if (opts.trigger === 'scroll' || opts.scrollTrigger) {
+            tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
+        }
+
+        gsap.from(el, tweenVars);
+    }
+
+    function clipDown(el, opts) {
+        opts = opts || {};
+        var o = resolveOptions(el, 'clipDown', opts);
+
+        var tweenVars = {
+            clipPath: 'inset(0 0 100% 0)',
+            duration: o.duration,
+            ease: o.ease,
+            delay: o.delay,
+        };
+
+        if (opts.trigger === 'scroll' || opts.scrollTrigger) {
+            tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
+        }
+
+        gsap.from(el, tweenVars);
+    }
+
+    function tiltIn(el, opts) {
+        opts = opts || {};
+        var o = resolveOptions(el, 'tiltIn', opts);
+
+        gsap.fromTo(el, {
+            rotationX: opts.rotationX != null ? opts.rotationX : 45,
+            scale: opts.scale != null ? opts.scale : 0.8,
+            opacity: opts.opacity != null ? opts.opacity : 0,
+            transformPerspective: opts.perspective != null ? opts.perspective : 1000,
+            transformOrigin: opts.transformOrigin || 'center bottom',
+        }, {
+            rotationX: 0,
+            scale: 1,
+            opacity: 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,
+            },
+        });
+    }
+
     // ── Class-to-effect mapping ─────────────────
 
     var effects = {
@@ -249,6 +353,10 @@
         'fx-spin-reveal': spinReveal,
         'fx-bg-reveal':   bgReveal,
         'fx-scale-in':    scaleIn,
+        'fx-fade-in':     fadeIn,
+        'fx-blur-in':     blurIn,
+        'fx-clip-up':     clipUp,
+        'fx-clip-down':   clipDown,
     };
 
     var effectsByName = {
@@ -257,6 +365,11 @@
         spinReveal: spinReveal,
         bgReveal: bgReveal,
         scaleIn: scaleIn,
+        fadeIn: fadeIn,
+        blurIn: blurIn,
+        clipUp: clipUp,
+        clipDown: clipDown,
+        tiltIn: tiltIn,
     };
 
     // ── Helpers ──────────────────────────────────
@@ -321,6 +434,8 @@
             });
 
             // 3. Bare class inside a section: .fx-<name> (no suffix)
+            //    Only elements inside a matching section are picked up,
+            //    but each element triggers itself (same as -st).
             if (config.sectionSelector) {
                 document.querySelectorAll(config.sectionSelector).forEach(function (section) {
                     var bareEls = Array.from(section.querySelectorAll('.' + name))
@@ -329,14 +444,29 @@
 
                     var groups = groupByParent(bareEls);
                     groups.forEach(function (group) {
-                        applyScrollGroup(fn, group, section);
-                        group.forEach(function (el) { processed.add(el); });
+                        group.forEach(function (el, i) {
+                            fn(el, {
+                                trigger: 'scroll',
+                                delay: i * 0.15,
+                                scrollTrigger: { trigger: el },
+                            });
+                            processed.add(el);
+                        });
                     });
                 });
             }
         });
 
-        // 4. Tag-based auto-animation inside sections
+        // 4. fx-tilt-in — scrub-based 3D perspective (always scroll-linked)
+        //    Processed before tagMap so tilt elements aren't grabbed by tagMap first.
+        document.querySelectorAll('.fx-tilt-in-st, .fx-tilt-in-pl, .fx-tilt-in').forEach(function (el) {
+            if (!processed.has(el)) {
+                tiltIn(el);
+                processed.add(el);
+            }
+        });
+
+        // 5. Tag-based auto-animation inside sections
         if (config.tagMap && config.sectionSelector) {
             document.querySelectorAll(config.sectionSelector).forEach(function (section) {
                 Object.keys(config.tagMap).forEach(function (selector) {
@@ -356,6 +486,50 @@
                 });
             });
         }
+        // 5. 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]
+            var childSelector = null;
+            for (var ci = 0; ci < container.classList.length; ci++) {
+                var cls = container.classList[ci];
+                if (cls.indexOf('fx-stagger-all-[') === 0 && cls.charAt(cls.length - 1) === ']') {
+                    childSelector = cls.slice('fx-stagger-all-['.length, -1);
+                    break;
+                }
+            }
+            if (!childSelector) return;
+
+            // Find which effect class is on this container
+            var effectFn = null;
+            var effectName = null;
+            Object.keys(effects).forEach(function (name) {
+                if (container.classList.contains(name + '-st') ||
+                    container.classList.contains(name + '-pl') ||
+                    container.classList.contains(name)) {
+                    effectFn = effects[name];
+                    effectName = name;
+                }
+            });
+            if (!effectFn) return; // No effect class paired — do nothing
+
+            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); });
+            if (children.length === 0) return;
+
+            children.forEach(function (child, i) {
+                var opts = { delay: i * 0.15 };
+                if (isScroll) {
+                    opts.trigger = 'scroll';
+                    opts.scrollTrigger = { trigger: child };
+                }
+                effectFn(child, opts);
+                processed.add(child);
+            });
+        });
+
     }
 
     // ── Boot ────────────────────────────────────
@@ -389,6 +563,11 @@
         spinReveal: spinReveal,
         bgReveal: bgReveal,
         scaleIn: scaleIn,
+        fadeIn: fadeIn,
+        blurIn: blurIn,
+        clipUp: clipUp,
+        clipDown: clipDown,
+        tiltIn: tiltIn,
         init: init,
     };
 })();

package/wp-plugin/fancoolo-fx/assets/fx.js

@@ -84,6 +84,11 @@
         spinReveal:  { duration: 1.4, ease: 'power3.out' },
         bgReveal:    { duration: 1,   ease: 'power3.out' },
         scaleIn:     { duration: 1,   ease: 'power3.out' },
+        fadeIn:      { duration: 1.4, ease: 'power1.out' },
+        blurIn:      { duration: 1.2, ease: 'power2.out' },
+        clipUp:      { duration: 1,   ease: 'power3.inOut' },
+        clipDown:    { duration: 1,   ease: 'power3.inOut' },
+        tiltIn:      { duration: 1.4, ease: 'power3.out' },
     };
 
     // ── Helpers ──────────────────────────────────
@@ -241,6 +246,105 @@
         gsap.from(el, tweenVars);
     }
 
+    function fadeIn(el, opts) {
+        opts = opts || {};
+        var o = resolveOptions(el, 'fadeIn', opts);
+
+        var tweenVars = {
+            opacity: 0,
+            scale: opts.scale != null ? opts.scale : 0.95,
+            duration: o.duration,
+            ease: o.ease,
+            delay: o.delay,
+        };
+
+        if (opts.trigger === 'scroll' || opts.scrollTrigger) {
+            tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
+        }
+
+        gsap.from(el, tweenVars);
+    }
+
+    function blurIn(el, opts) {
+        opts = opts || {};
+        var o = resolveOptions(el, 'blurIn', opts);
+
+        var tweenVars = {
+            filter: 'blur(' + (opts.blur != null ? opts.blur : 12) + 'px)',
+            opacity: 0,
+            duration: o.duration,
+            ease: o.ease,
+            delay: o.delay,
+        };
+
+        if (opts.trigger === 'scroll' || opts.scrollTrigger) {
+            tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
+        }
+
+        gsap.from(el, tweenVars);
+    }
+
+    function clipUp(el, opts) {
+        opts = opts || {};
+        var o = resolveOptions(el, 'clipUp', opts);
+
+        var tweenVars = {
+            clipPath: 'inset(100% 0 0 0)',
+            duration: o.duration,
+            ease: o.ease,
+            delay: o.delay,
+        };
+
+        if (opts.trigger === 'scroll' || opts.scrollTrigger) {
+            tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
+        }
+
+        gsap.from(el, tweenVars);
+    }
+
+    function clipDown(el, opts) {
+        opts = opts || {};
+        var o = resolveOptions(el, 'clipDown', opts);
+
+        var tweenVars = {
+            clipPath: 'inset(0 0 100% 0)',
+            duration: o.duration,
+            ease: o.ease,
+            delay: o.delay,
+        };
+
+        if (opts.trigger === 'scroll' || opts.scrollTrigger) {
+            tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
+        }
+
+        gsap.from(el, tweenVars);
+    }
+
+    function tiltIn(el, opts) {
+        opts = opts || {};
+        var o = resolveOptions(el, 'tiltIn', opts);
+
+        gsap.fromTo(el, {
+            rotationX: opts.rotationX != null ? opts.rotationX : 45,
+            scale: opts.scale != null ? opts.scale : 0.8,
+            opacity: opts.opacity != null ? opts.opacity : 0,
+            transformPerspective: opts.perspective != null ? opts.perspective : 1000,
+            transformOrigin: opts.transformOrigin || 'center bottom',
+        }, {
+            rotationX: 0,
+            scale: 1,
+            opacity: 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,
+            },
+        });
+    }
+
     // ── Class-to-effect mapping ─────────────────
 
     var effects = {
@@ -249,6 +353,10 @@
         'fx-spin-reveal': spinReveal,
         'fx-bg-reveal':   bgReveal,
         'fx-scale-in':    scaleIn,
+        'fx-fade-in':     fadeIn,
+        'fx-blur-in':     blurIn,
+        'fx-clip-up':     clipUp,
+        'fx-clip-down':   clipDown,
     };
 
     var effectsByName = {
@@ -257,6 +365,11 @@
         spinReveal: spinReveal,
         bgReveal: bgReveal,
         scaleIn: scaleIn,
+        fadeIn: fadeIn,
+        blurIn: blurIn,
+        clipUp: clipUp,
+        clipDown: clipDown,
+        tiltIn: tiltIn,
     };
 
     // ── Helpers ──────────────────────────────────
@@ -321,6 +434,8 @@
             });
 
             // 3. Bare class inside a section: .fx-<name> (no suffix)
+            //    Only elements inside a matching section are picked up,
+            //    but each element triggers itself (same as -st).
             if (config.sectionSelector) {
                 document.querySelectorAll(config.sectionSelector).forEach(function (section) {
                     var bareEls = Array.from(section.querySelectorAll('.' + name))
@@ -329,14 +444,29 @@
 
                     var groups = groupByParent(bareEls);
                     groups.forEach(function (group) {
-                        applyScrollGroup(fn, group, section);
-                        group.forEach(function (el) { processed.add(el); });
+                        group.forEach(function (el, i) {
+                            fn(el, {
+                                trigger: 'scroll',
+                                delay: i * 0.15,
+                                scrollTrigger: { trigger: el },
+                            });
+                            processed.add(el);
+                        });
                     });
                 });
             }
         });
 
-        // 4. Tag-based auto-animation inside sections
+        // 4. fx-tilt-in — scrub-based 3D perspective (always scroll-linked)
+        //    Processed before tagMap so tilt elements aren't grabbed by tagMap first.
+        document.querySelectorAll('.fx-tilt-in-st, .fx-tilt-in-pl, .fx-tilt-in').forEach(function (el) {
+            if (!processed.has(el)) {
+                tiltIn(el);
+                processed.add(el);
+            }
+        });
+
+        // 5. Tag-based auto-animation inside sections
         if (config.tagMap && config.sectionSelector) {
             document.querySelectorAll(config.sectionSelector).forEach(function (section) {
                 Object.keys(config.tagMap).forEach(function (selector) {
@@ -356,6 +486,50 @@
                 });
             });
         }
+        // 5. 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]
+            var childSelector = null;
+            for (var ci = 0; ci < container.classList.length; ci++) {
+                var cls = container.classList[ci];
+                if (cls.indexOf('fx-stagger-all-[') === 0 && cls.charAt(cls.length - 1) === ']') {
+                    childSelector = cls.slice('fx-stagger-all-['.length, -1);
+                    break;
+                }
+            }
+            if (!childSelector) return;
+
+            // Find which effect class is on this container
+            var effectFn = null;
+            var effectName = null;
+            Object.keys(effects).forEach(function (name) {
+                if (container.classList.contains(name + '-st') ||
+                    container.classList.contains(name + '-pl') ||
+                    container.classList.contains(name)) {
+                    effectFn = effects[name];
+                    effectName = name;
+                }
+            });
+            if (!effectFn) return; // No effect class paired — do nothing
+
+            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); });
+            if (children.length === 0) return;
+
+            children.forEach(function (child, i) {
+                var opts = { delay: i * 0.15 };
+                if (isScroll) {
+                    opts.trigger = 'scroll';
+                    opts.scrollTrigger = { trigger: child };
+                }
+                effectFn(child, opts);
+                processed.add(child);
+            });
+        });
+
     }
 
     // ── Boot ────────────────────────────────────
@@ -389,6 +563,11 @@
         spinReveal: spinReveal,
         bgReveal: bgReveal,
         scaleIn: scaleIn,
+        fadeIn: fadeIn,
+        blurIn: blurIn,
+        clipUp: clipUp,
+        clipDown: clipDown,
+        tiltIn: tiltIn,
         init: init,
     };
 })();

package/wp-plugin/fancoolo-fx/fancoolo-fx.php

@@ -1,9 +1,9 @@
 <?php
 /**
  * Plugin Name: Fancoolo FX
- * Plugin URI: https://github.com/krstivoja/gsap-animations-template
+ * Plugin URI: https://github.com/krstivoja/fancoolo-fx
  * Description: A class-driven GSAP animation wrapper. Add CSS classes in Gutenberg and get animations — no JavaScript needed.
- * Version: 1.0.2
+ * Version: 1.2.0
  * Author: Fancoolo
  * Author URI: https://github.com/krstivoja
  * License: ISC
@@ -14,7 +14,7 @@ if ( ! defined( 'ABSPATH' ) ) {
 	exit;
 }
 
-define( 'FANCOOLO_FX_VERSION', '1.0.2' );
+define( 'FANCOOLO_FX_VERSION', '1.2.0' );
 define( 'FANCOOLO_FX_PATH', plugin_dir_path( __FILE__ ) );
 define( 'FANCOOLO_FX_URL', plugin_dir_url( __FILE__ ) );
 
@@ -253,6 +253,11 @@ function fancoolo_fx_render_admin_page() {
 					<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.init()</code></td><td>Re-scan DOM — call after changing any config</td></tr>
 				</tbody>
 			</table>
@@ -346,6 +351,38 @@ FX.init();</pre>
 			<div class="ffx-class-row"><code data-copy>fx-scale-in-st</code><span class="ffx-desc">Scroll triggered</span></div>
 			<div class="ffx-class-row"><code data-copy>fx-scale-in</code><span class="ffx-desc">Auto triggered inside a section</span></div>
 
+			<!-- Fade In -->
+			<div class="ffx-group-title">Fade In</div>
+			<div class="ffx-class-row"><code data-copy>fx-fade-in-pl</code><span class="ffx-desc">Page load — opacity only, no movement</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-fade-in-st</code><span class="ffx-desc">Scroll triggered</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-fade-in</code><span class="ffx-desc">Auto triggered inside a section</span></div>
+
+			<!-- Blur In -->
+			<div class="ffx-group-title">Blur In</div>
+			<div class="ffx-class-row"><code data-copy>fx-blur-in-pl</code><span class="ffx-desc">Page load — fade in while deblurring</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-blur-in-st</code><span class="ffx-desc">Scroll triggered</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-blur-in</code><span class="ffx-desc">Auto triggered inside a section</span></div>
+
+			<!-- Clip Up -->
+			<div class="ffx-group-title">Clip Reveal</div>
+			<div class="ffx-class-row"><code data-copy>fx-clip-up-pl</code><span class="ffx-desc">Page load — clip-path wipe from bottom</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-clip-up-st</code><span class="ffx-desc">Scroll triggered</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-clip-up</code><span class="ffx-desc">Auto triggered inside a section</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-clip-down-pl</code><span class="ffx-desc">Page load — clip-path wipe from top</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-clip-down-st</code><span class="ffx-desc">Scroll triggered</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-clip-down</code><span class="ffx-desc">Auto triggered inside a section</span></div>
+
+			<!-- Tilt In -->
+			<div class="ffx-group-title">Tilt In <span style="font-weight:normal;color:#646970;font-size:12px;">(scrub — tied to scroll position)</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-tilt-in-st</code><span class="ffx-desc">3D perspective reveal linked to scroll</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-tilt-in</code><span class="ffx-desc">Auto triggered inside a section</span></div>
+
+			<!-- Stagger All -->
+			<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>
+			<div class="ffx-class-row"><code data-copy>fx-stagger-all-[img]</code><span class="ffx-desc">Target all img children — requires effect class</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-stagger-all-[img,p]</code><span class="ffx-desc">Target img and p children</span></div>
+			<div class="ffx-class-row"><code data-copy>fx-stagger-all-[.card]</code><span class="ffx-desc">Target children by CSS class</span></div>
+
 			<!-- Modifiers -->
 			<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>
 			<div class="ffx-class-row"><code data-copy>fx-duration-[1.5]</code><span class="ffx-desc">Custom duration (seconds)</span></div>
@@ -360,7 +397,7 @@ FX.init();</pre>
 			<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/gsap-animations-template/documentation/" target="_blank">
+			<a href="https://krstivoja.github.io/fancoolo-fx/documentation/" target="_blank">
 				Full Documentation &rarr;
 			</a>
 		</p>