npm - fancoolo-fx - Versions diffs - 1.7.0 → 1.7.1 - Mend

fancoolo-fx 1.7.0 → 1.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/README.md CHANGED Viewed

@@ -169,11 +169,36 @@ Set `trigger: 'scroll'` to enable ScrollTrigger. Pass `scrollTrigger: { trigger:
 **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.
+## Preventing Flash of Unstyled Content (FOUC)
+FX uses GSAP's `autoAlpha` internally, so elements with `visibility: hidden` are revealed automatically when their animation starts. Add this CSS **before** any content renders to prevent the flash where elements appear briefly before JS loads:
+```css
+.fx-text-reveal-pl,.fx-text-reveal-st,.fx-text-reveal,
+.fx-reveal-pl,.fx-reveal-st,.fx-reveal,
+.fx-spin-reveal-pl,.fx-spin-reveal-st,.fx-spin-reveal,
+.fx-bg-reveal-pl,.fx-bg-reveal-st,.fx-bg-reveal,
+.fx-scale-in-pl,.fx-scale-in-st,.fx-scale-in,
+.fx-fade-in-pl,.fx-fade-in-st,.fx-fade-in,
+.fx-blur-in-pl,.fx-blur-in-st,.fx-blur-in,
+.fx-clip-up-pl,.fx-clip-up-st,.fx-clip-up,
+.fx-clip-down-pl,.fx-clip-down-st,.fx-clip-down,
+.fx-tilt-in-st,.fx-tilt-in,
+.fx-type-writer-pl,.fx-type-writer-st,.fx-type-writer,
+.fx-draw-svg-pl,.fx-draw-svg-st,.fx-draw-svg,.fx-draw-svg-scrub,
+.fx-split-words-pl,.fx-split-words-st,.fx-split-words,
+.fx-slide-left-pl,.fx-slide-left-st,.fx-slide-left,
+.fx-slide-right-pl,.fx-slide-right-st,.fx-slide-right{visibility:hidden}
+```
+**WordPress:** The plugin injects this CSS automatically in the `<head>` — no action needed.
 ## Using in a New Project
 1. Copy this repo (or `npm install`)
 2. Add the 4 script tags (gsap, ScrollTrigger, SplitText, fx.js)
-3. Add `.fx-*` classes in your HTML
+3. Add the FOUC prevention CSS in your `<head>` (see above)
+4. Add `.fx-*` classes in your HTML
 For compound sequences, create a project-specific JS file loaded after fx.js:

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "fancoolo-fx",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "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 CHANGED Viewed

@@ -68,6 +68,12 @@ Yes. Use the `fx-start-[top center]` modifier class, or set `scrollStart` in the
 == Changelog ==
+= 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

package/src/fx.js CHANGED Viewed

@@ -206,6 +206,7 @@
         opts = opts || {};
         var o = resolveOptions(el, 'textReveal', opts);
+        gsap.set(el, { visibility: 'inherit' });
         var split = new SplitText(el, { type: 'lines', linesClass: 'line-wrapper' });
         split.lines.forEach(function (line) {
@@ -220,7 +221,7 @@
         var tweenVars = {
             y: '100%',
-            opacity: 0,
+            autoAlpha: 0,
             duration: o.duration,
             ease: o.ease,
             stagger: o.stagger,
@@ -248,7 +249,7 @@
         var tweenVars = {
             y: opts.y != null ? opts.y : 80,
-            opacity: 0,
+            autoAlpha: 0,
             duration: o.duration,
             ease: o.ease,
             delay: o.delay,
@@ -268,7 +269,7 @@
         var tweenVars = {
             rotation: opts.rotation != null ? opts.rotation : -30,
             scale: opts.scale != null ? opts.scale : 0.9,
-            opacity: 0,
+            autoAlpha: 0,
             duration: o.duration,
             ease: o.ease,
             delay: o.delay,
@@ -287,7 +288,7 @@
         var tweenVars = {
             y: '100%',
-            opacity: 0,
+            autoAlpha: 0,
             duration: o.duration,
             ease: o.ease,
             delay: o.delay,
@@ -306,7 +307,7 @@
         var tweenVars = {
             scale: opts.scale != null ? opts.scale : 0.92,
-            opacity: 0,
+            autoAlpha: 0,
             duration: o.duration,
             ease: o.ease,
             delay: o.delay,
@@ -324,7 +325,7 @@
         var o = resolveOptions(el, 'fadeIn', opts);
         var tweenVars = {
-            opacity: 0,
+            autoAlpha: 0,
             scale: opts.scale != null ? opts.scale : 0.95,
             duration: o.duration,
             ease: o.ease,
@@ -344,7 +345,7 @@
         var tweenVars = {
             filter: 'blur(' + (opts.blur != null ? opts.blur : 12) + 'px)',
-            opacity: 0,
+            autoAlpha: 0,
             duration: o.duration,
             ease: o.ease,
             delay: o.delay,
@@ -363,6 +364,7 @@
         var tweenVars = {
             clipPath: 'inset(100% 0 0 0)',
+            autoAlpha: 0,
             duration: o.duration,
             ease: o.ease,
             delay: o.delay,
@@ -381,6 +383,7 @@
         var tweenVars = {
             clipPath: 'inset(0 0 100% 0)',
+            autoAlpha: 0,
             duration: o.duration,
             ease: o.ease,
             delay: o.delay,
@@ -400,13 +403,13 @@
         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,
+            autoAlpha: opts.opacity != null ? opts.opacity : 0,
             transformPerspective: opts.perspective != null ? opts.perspective : 1000,
             transformOrigin: opts.transformOrigin || 'center bottom',
         }, {
             rotationX: 0,
             scale: 1,
-            opacity: 1,
+            autoAlpha: 1,
             transformPerspective: 1000,
             ease: o.ease,
             scrollTrigger: {
@@ -422,14 +425,15 @@
         opts = opts || {};
         var o = resolveOptions(el, 'typeWriter', opts);
+        gsap.set(el, { visibility: 'inherit' });
         var split = new SplitText(el, { type: 'chars' });
-        gsap.set(split.chars, { opacity: 0 });
+        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 = {
-            opacity: 1,
+            autoAlpha: 1,
             duration: o.duration,
             ease: o.ease,
             stagger: o.stagger,
@@ -454,6 +458,7 @@
     function drawSVG(el, opts) {
         opts = opts || {};
         var o = resolveOptions(el, 'drawSVG', opts);
+        gsap.set(el, { visibility: 'inherit' });
         var paths = el.tagName === 'path' || el.tagName === 'line' || el.tagName === 'circle' || el.tagName === 'polyline'
             ? [el]
@@ -521,6 +526,7 @@
         opts = opts || {};
         var o = resolveOptions(el, 'splitWords', opts);
+        gsap.set(el, { visibility: 'inherit' });
         var split = new SplitText(el, { type: 'words' });
         var isOneShot = !(opts.trigger === 'scroll' || opts.scrollTrigger) || config.scrollOnce;
@@ -528,7 +534,7 @@
         var tweenVars = {
             y: opts.y != null ? opts.y : 30,
-            opacity: 0,
+            autoAlpha: 0,
             duration: o.duration,
             ease: o.ease,
             stagger: o.stagger,
@@ -558,7 +564,7 @@
         var tweenVars = {
             x: direction === 'left' ? -xVal : xVal,
-            opacity: 0,
+            autoAlpha: 0,
             duration: o.duration,
             ease: o.ease,
             delay: o.delay,