@squeditor/squeditor-framework 1.0.0

package/project-template/src/assets/js/gsap-modules/marquee.js

@@ -0,0 +1,106 @@
+// src/assets/js/gsap-modules/marquee.js
+import { gsap }          from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+export function init() {
+  const marquees = document.querySelectorAll('[data-sq-marquee]');
+  if (!marquees.length) return;
+
+  marquees.forEach(wrapper => {
+    const attr      = wrapper.getAttribute('data-sq-marquee') || '';
+    const config    = parseModuleAttr(attr);
+    const speed     = config.speed     ?? 50;   // px per second
+    const gap       = config.gap       ?? 40;
+    const direction = config.direction === 'right' ? 1 : -1;
+
+    // Clone items to fill width for seamless loop
+    const items       = Array.from(wrapper.children);
+    const cloneGroup  = document.createElement('div');
+    cloneGroup.className = 'sq-marquee__inner';
+    const origGroup   = document.createElement('div');
+    origGroup.className  = 'sq-marquee__inner';
+
+    items.forEach(item => {
+      origGroup.appendChild(item.cloneNode(true));
+      cloneGroup.appendChild(item.cloneNode(true));
+    });
+
+    wrapper.innerHTML = '';
+    wrapper.style.overflow = 'hidden';
+    wrapper.style.display  = 'flex';
+
+    injectStyles(`
+      .sq-marquee__inner {
+        display: flex;
+        align-items: center;
+        gap: ${gap}px;
+        white-space: nowrap;
+        flex-shrink: 0;
+        padding-right: ${gap}px;
+      }
+    `);
+
+    wrapper.appendChild(origGroup);
+    wrapper.appendChild(cloneGroup);
+
+    // Calculate total width for one group
+    const totalWidth = origGroup.scrollWidth;
+
+    let currentSpeed = speed * direction * -1;
+
+    // Infinite scroll animation
+    const tween = gsap.to([origGroup, cloneGroup], {
+      x:        `+=${totalWidth * (direction < 0 ? -1 : 1)}`,
+      modifiers: {
+        x: gsap.utils.unitize(x => parseFloat(x) % totalWidth),
+      },
+      duration:  totalWidth / speed,
+      ease:      'none',
+      repeat:    -1,
+    });
+
+    // Reverse / slow on scroll direction change
+    ScrollTrigger.create({
+      onUpdate: (self) => {
+        const velocity = self.getVelocity();
+        if (Math.abs(velocity) > 10) {
+          const factor = velocity < 0 ? -1 : 1;
+          gsap.to(tween, {
+            timeScale: factor * Math.min(Math.abs(velocity) / 500, 3),
+            duration:  0.5,
+            ease:      'power2.out',
+            overwrite:  true,
+          });
+        } else {
+          gsap.to(tween, {
+            timeScale: direction < 0 ? -1 : 1,
+            duration:  0.8,
+            ease:      'power2.out',
+            overwrite:  true,
+          });
+        }
+      },
+    });
+  });
+}
+
+function parseModuleAttr(str) {
+  const config = {};
+  if (!str) return config;
+  str.split(';').forEach(part => {
+    const idx = part.indexOf(':');
+    if (idx === -1) return;
+    const key = part.slice(0, idx).trim();
+    const val = part.slice(idx + 1).trim().replace(/['"]/g, '');
+    config[key] = isNaN(val) ? val : parseFloat(val);
+  });
+  return config;
+}
+
+function injectStyles(css) {
+  const style = document.createElement('style');
+  style.textContent = css;
+  document.head.appendChild(style);
+}

package/project-template/src/assets/js/gsap-modules/pinned-panels.js

@@ -0,0 +1,105 @@
+// src/assets/js/gsap-modules/pinned-panels.js
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+export function init() {
+    const wrappers = document.querySelectorAll('[data-sq-panels]');
+    if (!wrappers.length) return;
+
+    wrappers.forEach(wrapper => {
+        const attr = wrapper.getAttribute('data-sq-panels') || '';
+        const config = parseModuleAttr(attr);
+        const rounded = config.rounded ?? true;
+        const panels = Array.from(wrapper.children);
+
+        injectStyles(`
+      [data-sq-panels] {
+        position: relative;
+        z-index: 1;
+      }
+      .sq-panel {
+        width: 100%;
+        height: 100vh;
+        overflow: hidden;
+        position: relative;
+        box-sizing: border-box;
+        ${rounded ? 'border-radius: 0 0 24px 24px;' : ''}
+        will-change: transform;
+      }
+      .sq-panel-inner {
+        width: 100%;
+        height: auto;
+        min-height: 100vh;
+      }
+    `);
+
+        // All panels except the last one pin and scale away
+        const pinningPanels = panels.slice(0, -1);
+
+        pinningPanels.forEach((panel) => {
+            let innerpanel = panel.querySelector(".sq-panel-inner") || panel;
+
+            // Calculate how much inner content exceeds the viewport height
+            let panelHeight = innerpanel.offsetHeight;
+            let windowHeight = window.innerHeight;
+            let difference = panelHeight - windowHeight;
+
+            // Calculate the ratio of the scroll distance that applies to fake-scrolling
+            let fakeScrollRatio = difference > 0 ? (difference / (difference + windowHeight)) : 0;
+
+            // Add margin to push the start of the next panel down, giving us scroll distance
+            if (fakeScrollRatio) {
+                panel.style.marginBottom = panelHeight * fakeScrollRatio + "px";
+            }
+
+            let tl = gsap.timeline({
+                scrollTrigger: {
+                    trigger: panel,
+                    start: "top top",
+                    end: () => fakeScrollRatio ? `+=${innerpanel.offsetHeight}` : "bottom top",
+                    pinSpacing: false,
+                    pin: true,
+                    scrub: true
+                }
+            });
+
+            // If there's overflow, translate the inner content up to simulate scrolling
+            if (fakeScrollRatio) {
+                tl.to(innerpanel, {
+                    yPercent: -100,
+                    y: windowHeight,
+                    duration: 1 / (1 - fakeScrollRatio) - 1,
+                    ease: "none"
+                });
+            }
+
+            // Standard scale and fade away transition for the panel itself
+            tl.fromTo(panel,
+                { scale: 1, opacity: 1 },
+                { scale: 0.85, opacity: 0.5, duration: 0.9, ease: "none" }
+            )
+                .to(panel, { opacity: 0, duration: 0.1, ease: "none" });
+        });
+    });
+}
+
+function parseModuleAttr(str) {
+    const config = {};
+    if (!str) return config;
+    str.split(';').forEach(part => {
+        const idx = part.indexOf(':');
+        if (idx === -1) return;
+        const key = part.slice(0, idx).trim();
+        const val = part.slice(idx + 1).trim().replace(/['"]/g, '');
+        config[key] = isNaN(val) ? (val === 'true' ? true : (val === 'false' ? false : val)) : parseFloat(val);
+    });
+    return config;
+}
+
+function injectStyles(css) {
+    const style = document.createElement('style');
+    style.textContent = css;
+    document.head.appendChild(style);
+}

package/project-template/src/assets/js/gsap-modules/scroll-to.js

@@ -0,0 +1,54 @@
+// src/assets/js/gsap-modules/scroll-to.js
+import { gsap } from 'gsap';
+import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
+
+gsap.registerPlugin(ScrollToPlugin);
+
+export function init() {
+    // Select all elements that have the [data-sq-scrollto] attribute
+    const triggers = document.querySelectorAll('[data-sq-scrollto]');
+
+    triggers.forEach(trigger => {
+        // Read configuration from the attribute, fallback to empty string
+        const configStr = trigger.getAttribute('data-sq-scrollto') || '';
+
+        // Parse simple config (e.g., target: "#section2", duration: 1, offsetY: 120)
+        // If the attribute contains just a string, we assume it's the target selector.
+        let config = {};
+
+        if (configStr.startsWith('{')) {
+            try {
+                // To allow unquoted keys like {target: "#id", offsetY: 50} we use a small regex replacer or Function constructor
+                // A safe enough approach for typical declarative attributes:
+                const sanitizedStr = configStr
+                    .replace(/([{,]\s*)([a-zA-Z0-9_]+)\s*:/g, '$1"$2":') // Quote keys
+                    .replace(/:\s*'([^']*)'/g, ':"$1"'); // Convert single quotes to double quotes for values
+
+                config = JSON.parse(sanitizedStr);
+            } catch (e) {
+                console.error('GSAP ScrollTo: Invalid JSON config in attribute', configStr, e);
+            }
+        } else if (configStr) {
+            config.target = configStr;
+        }
+
+        // If target exists in config OR the trigger is an anchor tag, find the destination
+        const destination = config.target || trigger.getAttribute('href');
+
+        if (!destination || destination === '#') return;
+
+        trigger.addEventListener('click', (e) => {
+            e.preventDefault();
+
+            gsap.to(window, {
+                duration: config.duration || 1,
+                scrollTo: {
+                    y: destination,
+                    offsetY: config.offsetY !== undefined ? config.offsetY : 0,
+                    autoKill: true
+                },
+                ease: config.ease || "power2.out"
+            });
+        });
+    });
+}

package/project-template/src/assets/js/gsap-modules/swipe-slider.js

@@ -0,0 +1,121 @@
+// src/assets/js/gsap-modules/swipe-slider.js
+import { gsap } from 'gsap';
+import { Observer } from 'gsap/observer';
+import { SplitText } from 'gsap/SplitText';
+
+gsap.registerPlugin(Observer, SplitText);
+
+export function init() {
+    const sliders = document.querySelectorAll('[data-sq-swipe]');
+    if (!sliders.length) return;
+
+    sliders.forEach(wrapper => {
+        const attr = wrapper.getAttribute('data-sq-swipe') || '';
+        const config = parseModuleAttr(attr);
+        const duration = config.duration ?? 1.25;
+        const ease = config.ease ?? 'power1.inOut';
+
+        injectStyles(`
+      .sq-swipe-section { visibility: hidden; }
+      .sq-swipe-bg .clip-text { overflow: hidden; }
+    `);
+
+        const sections = Array.from(wrapper.querySelectorAll('.sq-swipe-section'));
+        const outerWrappers = Array.from(wrapper.querySelectorAll('.sq-swipe-outer'));
+        const innerWrappers = Array.from(wrapper.querySelectorAll('.sq-swipe-inner'));
+        const images = Array.from(wrapper.querySelectorAll('.sq-swipe-bg'));
+        const headings = Array.from(wrapper.querySelectorAll('.section-heading'));
+
+        let currentIndex = -1;
+        let animating = false;
+        const wrap = gsap.utils.wrap(0, sections.length);
+
+        // Prepare text splits if heading class is present
+        let splitHeadings = headings.map(heading => {
+            return new SplitText(heading, { type: "chars,words,lines", linesClass: "clip-text" });
+        });
+
+        // Reset layout for outer/inner
+        gsap.set(outerWrappers, { yPercent: 100 });
+        gsap.set(innerWrappers, { yPercent: -100 });
+
+        function goTo(index, direction) {
+            if (animating) return;
+            index = wrap(index);
+            animating = true;
+            let fromTop = direction === -1,
+                dFactor = fromTop ? -1 : 1,
+                tl = gsap.timeline({
+                    defaults: { duration: duration, ease: ease },
+                    onComplete: () => animating = false
+                });
+
+            if (currentIndex >= 0) {
+                gsap.set(sections[currentIndex], { zIndex: 0 });
+                tl.to(images[currentIndex], { yPercent: -15 * dFactor })
+                    .set(sections[currentIndex], { autoAlpha: 0 });
+            }
+
+            gsap.set(sections[index], { autoAlpha: 1, zIndex: 1 });
+
+            tl.fromTo([outerWrappers[index], innerWrappers[index]], {
+                yPercent: i => i ? -100 * dFactor : 100 * dFactor
+            }, {
+                yPercent: 0
+            }, 0)
+                .fromTo(images[index], { yPercent: 15 * dFactor }, { yPercent: 0 }, 0);
+
+            if (splitHeadings[index]) {
+                tl.fromTo(splitHeadings[index].chars, {
+                    autoAlpha: 0,
+                    yPercent: 150 * dFactor
+                }, {
+                    autoAlpha: 1,
+                    yPercent: 0,
+                    duration: 1,
+                    ease: "power2",
+                    stagger: {
+                        each: 0.02,
+                        from: "random"
+                    }
+                }, 0.2);
+            }
+
+            currentIndex = index;
+        }
+
+        Observer.create({
+            target: wrapper,
+            type: "wheel,touch,pointer",
+            wheelSpeed: -1,
+            tolerance: 10,
+            preventDefault: true,
+            onDown: () => !animating && goTo(currentIndex - 1, -1),
+            onUp: () => !animating && goTo(currentIndex + 1, 1)
+        });
+
+        goTo(0, 1);
+    });
+}
+
+function parseModuleAttr(str) {
+    const config = {};
+    if (!str) return config;
+    str.split(';').forEach(part => {
+        const idx = part.indexOf(':');
+        if (idx === -1) return;
+        const key = part.slice(0, idx).trim();
+        const val = part.slice(idx + 1).trim().replace(/['"]/g, '');
+        if (val === 'true') config[key] = true;
+        else if (val === 'false') config[key] = false;
+        else if (!isNaN(val)) config[key] = parseFloat(val);
+        else config[key] = val;
+    });
+    return config;
+}
+
+function injectStyles(css) {
+    const style = document.createElement('style');
+    style.textContent = css;
+    document.head.appendChild(style);
+}

package/project-template/src/assets/js/gsap-modules/text-mask.js

@@ -0,0 +1,93 @@
+// src/assets/js/gsap-modules/text-mask.js
+import { gsap } from 'gsap';
+import { SplitText } from 'gsap/SplitText';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(SplitText, ScrollTrigger);
+
+export function init() {
+    const elements = document.querySelectorAll('[data-sq-mask]');
+    if (!elements.length) return;
+
+    injectStyles(`
+    .sq-mask-wrapper {
+      overflow: hidden;
+      display: inline-block; /* Support nested or inline layouts */
+      vertical-align: top;
+      width: 100%;
+    }
+  `);
+
+    elements.forEach(el => {
+        const attr = el.getAttribute('data-sq-mask') || '';
+        const config = parseModuleAttr(attr);
+        const type = config.type ?? 'lines';
+        const duration = config.duration ?? 1.2;
+        const stagger = config.stagger ?? 0.15;
+        const ease = config.ease ?? 'expo.out';
+        const useScroll = config.scroll ?? true;
+
+        // Ensure opacity is visible before we split (if it was hidden initially via CSS)
+        gsap.set(el, { opacity: 1 });
+
+        // In order for masking to work, we need an outer container with overflow:hidden.
+        // If we want to mask lines, we split by lines, then wrap each line in a div.
+        const splitFormat = type === 'words' ? 'words' : 'lines';
+
+        const split = new SplitText(el, {
+            type: `${splitFormat},words,chars`, // Force deep split to prevent reflow bugs
+            linesClass: splitFormat === 'lines' ? 'sq-split-target' : '',
+            wordsClass: splitFormat === 'words' ? 'sq-split-target' : '',
+        });
+
+        const targets = el.querySelectorAll('.sq-split-target');
+
+        // Wrap each target in an overflow:hidden mask
+        targets.forEach(target => {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'sq-mask-wrapper';
+            target.parentNode.insertBefore(wrapper, target);
+            wrapper.appendChild(target);
+        });
+
+        const vars = {
+            yPercent: 100,
+            opacity: 0,
+            duration,
+            stagger,
+            ease,
+        };
+
+        if (useScroll) {
+            vars.scrollTrigger = {
+                trigger: el,
+                start: config.start ?? 'top 85%',
+                toggleActions: 'play none none none',
+            };
+        }
+
+        gsap.from(targets, vars);
+    });
+}
+
+function parseModuleAttr(str) {
+    const config = {};
+    if (!str) return config;
+    str.split(';').forEach(part => {
+        const idx = part.indexOf(':');
+        if (idx === -1) return;
+        const key = part.slice(0, idx).trim();
+        const val = part.slice(idx + 1).trim().replace(/['"]/g, '');
+        if (val === 'true') config[key] = true;
+        else if (val === 'false') config[key] = false;
+        else if (!isNaN(val)) config[key] = parseFloat(val);
+        else config[key] = val;
+    });
+    return config;
+}
+
+function injectStyles(css) {
+    const style = document.createElement('style');
+    style.textContent = css;
+    document.head.appendChild(style);
+}

package/project-template/src/assets/js/gsap-modules/tilt.js

@@ -0,0 +1,70 @@
+// src/assets/js/gsap-modules/tilt.js
+import { gsap } from 'gsap';
+
+export function init() {
+  const elements = document.querySelectorAll('[data-sq-tilt]');
+  if (!elements.length) return;
+
+  elements.forEach(el => {
+    const attr = el.getAttribute('data-sq-tilt') || '';
+    const config = parseModuleAttr(attr);
+
+    const max = config.max ?? 15;
+    const scale = config.scale ?? 1.05;
+    const speed = (config.speed ?? 400) / 1000; // convert to seconds for quickTo
+
+    // Wrap content for inner tilt layer
+    el.style.transformStyle = 'preserve-3d';
+    el.style.perspective = '1000px';
+
+    // Setup quickTo mutators for high performance
+    const rotateX = gsap.quickTo(el, "rotationX", { ease: "power3", duration: speed });
+    const rotateY = gsap.quickTo(el, "rotationY", { ease: "power3", duration: speed });
+    const scaleTo = gsap.quickTo(el, "scale", { ease: "power3", duration: speed });
+
+    // Inner parallax tracking
+    const innerLayers = el.querySelectorAll('[data-sq-tilt-inner]');
+    const innerX = innerLayers.length ? gsap.quickTo(innerLayers, "x", { ease: "power3", duration: speed }) : null;
+    const innerY = innerLayers.length ? gsap.quickTo(innerLayers, "y", { ease: "power3", duration: speed }) : null;
+
+    el.addEventListener('pointermove', (e) => {
+      const rect = el.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+
+      // Calculate interpolation relative to center
+      const pctX = (e.clientX - centerX) / (rect.width / 2);
+      const pctY = (e.clientY - centerY) / (rect.height / 2);
+
+      // Map limits
+      rotateX(pctY * -max);
+      rotateY(pctX * max);
+      scaleTo(scale);
+
+      // Inner elements move double the max in opposite parallax relative to rotation
+      if (innerX) innerX(pctX * -(max * 2));
+      if (innerY) innerY(pctY * -(max * 2));
+    });
+
+    el.addEventListener('pointerleave', () => {
+      rotateX(0);
+      rotateY(0);
+      scaleTo(1);
+      if (innerX) innerX(0);
+      if (innerY) innerY(0);
+    });
+  });
+}
+
+function parseModuleAttr(str) {
+  const config = {};
+  if (!str) return config;
+  str.split(';').forEach(part => {
+    const idx = part.indexOf(':');
+    if (idx === -1) return;
+    const key = part.slice(0, idx).trim();
+    const val = part.slice(idx + 1).trim().replace(/['"]/g, '');
+    config[key] = isNaN(val) ? val : parseFloat(val);
+  });
+  return config;
+}