@vectoriox/iox-builder 1.4.76 → 1.4.78

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1266,11 +1266,9 @@ class InteractionEngineService {
         const cleanups = [];
         for (const ix of node.interactions) {
             // Pre-state: hide target elements before their entrance animation fires.
-            // In builder mode: skip pre-state for auto-fire triggers that either are
-            // suppressed (pageLoad, scrollProgress) or use a Lenis scroll container
-            // where pointer-events:none on canvas elements breaks wheel event routing
-            // (viewportEnter). Click/hover triggers are always active.
-            const skipPreState = inBuilder && ix.trigger !== 'click' && ix.trigger !== 'hover';
+            // In builder mode: skip only suppressed triggers (pageLoad, scrollProgress).
+            // viewportEnter IS active in builder — elements must be hidden before trigger.
+            const skipPreState = inBuilder && (ix.trigger === 'pageLoad' || ix.trigger === 'scrollProgress');
             if (!skipPreState) {
                 for (const action of ix.actions) {
                     if (this.ENTRANCE_TYPES.has(action.type)) {
@@ -1446,16 +1444,48 @@ class InteractionEngineService {
             firedSet.add(key);
             this.runActions(node, ix.actions);
         };
+        // IntersectionObserver with no root uses the browser viewport.
+        // It respects overflow:hidden clipping from .preview-scroll so it fires
+        // correctly as Lenis scrolls (Lenis changes scrollTop on .preview-scroll).
         const observer = new IntersectionObserver((entries) => {
             for (const entry of entries) {
                 if (entry.isIntersecting) {
-                    observer.disconnect();
+                    cleanup();
                     fire();
                 }
             }
         }, { threshold: 0.1 });
         observer.observe(element);
-        return () => observer.disconnect();
+        // Builder: also listen to Lenis scroll events on .preview-lenis-content
+        // as a fallback in case IntersectionObserver misses elements behind a
+        // CSS transform (scale) on iox-page-component.
+        const lenisEl = this.overlayService.getScrollContainer();
+        let scrollFired = false;
+        const onScroll = () => {
+            if (scrollFired)
+                return;
+            const rootEl = this.overlayService.getIntersectionRoot();
+            if (!rootEl)
+                return;
+            const rootRect = rootEl.getBoundingClientRect();
+            const elRect = element.getBoundingClientRect();
+            const overlapH = Math.min(elRect.bottom, rootRect.bottom) - Math.max(elRect.top, rootRect.top);
+            const elH = elRect.bottom - elRect.top;
+            if (elH > 0 && overlapH / elH >= 0.1) {
+                scrollFired = true;
+                cleanup();
+                fire();
+            }
+        };
+        if (lenisEl)
+            lenisEl.addEventListener('scroll', onScroll, { passive: true });
+        const cleanup = () => {
+            observer.disconnect();
+            scrollFired = true;
+            if (lenisEl)
+                lenisEl.removeEventListener('scroll', onScroll);
+        };
+        return cleanup;
     }
     isBuilderMode() {
         return document.body.classList.contains('builder-active');
@@ -1601,22 +1631,26 @@ class InteractionEngineService {
      * trigger fires. Called for ALL entrance-type actions regardless of trigger so
      * that a click-triggered fadeIn on a menu overlay also starts it hidden.
      *
-     * Also sets pointer-events:none so the invisible element does not block clicks
-     * on other content beneath it. Pointer events are restored in executeAction()
-     * once the entrance animation finishes.
+     * In builder mode only opacity:0 is applied — transforms on canvas elements
+     * inside iox-page-component's scale() transform break Lenis scroll. The transform
+     * jump at animation t=0 is invisible because the element is already opacity:0.
+     * In production the full keyframe is applied + pointer-events:none.
      */
     applyPreState(element, action) {
         const { keyframes } = this.buildAnimation(action);
         if (!keyframes.length)
             return;
         const first = keyframes[0];
-        for (const [prop, val] of Object.entries(first)) {
-            element.style[prop] = String(val);
+        if (this.isBuilderMode()) {
+            element.style.setProperty('opacity', '0');
+        }
+        else {
+            for (const [prop, val] of Object.entries(first)) {
+                element.style[prop] = String(val);
+            }
+            element.style.setProperty('pointer-events', 'none');
         }
-        // Mark as hidden so the builder overlay and drag engine can ignore this element
-        // and all of its children regardless of which entrance animation type is used.
         element.setAttribute('data-iox-hidden', '');
-        element.style.setProperty('pointer-events', 'none');
         this.preStatedElements.add(element);
     }
     clearInlineAnimationStyles(element) {