fancoolo-fx 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fancoolo-fx",
-  "version": "1.1.0",
+  "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,10 +84,11 @@
         spinReveal:  { duration: 1.4, ease: 'power3.out' },
         bgReveal:    { duration: 1,   ease: 'power3.out' },
         scaleIn:     { duration: 1,   ease: 'power3.out' },
-        fadeIn:      { duration: 0.8, ease: 'power2.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 ──────────────────────────────────
@@ -251,6 +252,7 @@
 
         var tweenVars = {
             opacity: 0,
+            scale: opts.scale != null ? opts.scale : 0.95,
             duration: o.duration,
             ease: o.ease,
             delay: o.delay,
@@ -318,6 +320,31 @@
         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 = {
@@ -342,6 +369,7 @@
         blurIn: blurIn,
         clipUp: clipUp,
         clipDown: clipDown,
+        tiltIn: tiltIn,
     };
 
     // ── Helpers ──────────────────────────────────
@@ -429,7 +457,16 @@
             }
         });
 
-        // 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) {
@@ -492,6 +529,7 @@
                 processed.add(child);
             });
         });
+
     }
 
     // ── Boot ────────────────────────────────────
@@ -529,6 +567,7 @@
         blurIn: blurIn,
         clipUp: clipUp,
         clipDown: clipDown,
+        tiltIn: tiltIn,
         init: init,
     };
 })();

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

@@ -84,10 +84,11 @@
         spinReveal:  { duration: 1.4, ease: 'power3.out' },
         bgReveal:    { duration: 1,   ease: 'power3.out' },
         scaleIn:     { duration: 1,   ease: 'power3.out' },
-        fadeIn:      { duration: 0.8, ease: 'power2.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 ──────────────────────────────────
@@ -251,6 +252,7 @@
 
         var tweenVars = {
             opacity: 0,
+            scale: opts.scale != null ? opts.scale : 0.95,
             duration: o.duration,
             ease: o.ease,
             delay: o.delay,
@@ -318,6 +320,31 @@
         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 = {
@@ -342,6 +369,7 @@
         blurIn: blurIn,
         clipUp: clipUp,
         clipDown: clipDown,
+        tiltIn: tiltIn,
     };
 
     // ── Helpers ──────────────────────────────────
@@ -429,7 +457,16 @@
             }
         });
 
-        // 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) {
@@ -492,6 +529,7 @@
                 processed.add(child);
             });
         });
+
     }
 
     // ── Boot ────────────────────────────────────
@@ -529,6 +567,7 @@
         blurIn: blurIn,
         clipUp: clipUp,
         clipDown: clipDown,
+        tiltIn: tiltIn,
         init: init,
     };
 })();

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

@@ -3,7 +3,7 @@
  * Plugin Name: Fancoolo FX
  * 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.1.0
+ * 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.1.0' );
+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>
@@ -367,6 +372,11 @@ FX.init();</pre>
 			<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>