atomicuilibrary 0.0.1

package/dist/collection/components/animate-on-scroll/animate-on-scroll.js

@@ -0,0 +1,696 @@
+import { Host, h } from "@stencil/core";
+export class AnimateOnScroll {
+    el;
+    /**
+     * CSS classes to apply when element enters viewport
+     */
+    enterClass = 'fade-in';
+    /**
+     * CSS classes to apply when element leaves viewport
+     */
+    leaveClass = '';
+    /**
+     * Threshold for intersection observer (0-1)
+     */
+    threshold = 0.5;
+    /**
+     * Root margin for intersection observer
+     */
+    rootMargin = '0px';
+    /**
+     * Whether to animate only once or every time element enters viewport
+     */
+    once = false;
+    /**
+     * Animation duration in milliseconds
+     */
+    duration = 1000;
+    /**
+     * Animation delay in milliseconds
+     */
+    delay = 0;
+    /**
+     * Animation easing function
+     */
+    easing = 'ease';
+    /**
+     * CSS class or ID of the element to use as the scroll anchor
+     */
+    anchor = '';
+    /**
+     * Selector for the root element (scroll container)
+     */
+    root = '';
+    /**
+     * Blur amount for starting state (e.g. '5px')
+     * Renamed from 'blur' to avoid conflict with HTMLElement.blur()
+     */
+    blurAmount = '';
+    /**
+     * 3D Perspective value (e.g. '1000px')
+     */
+    perspective = '';
+    /**
+     * Stagger delay per child in ms (if children exist)
+     */
+    stagger = 0;
+    /**
+     * The transform origin for rotation/flip animations (e.g. 'top' or 'center')
+     */
+    transformOrigin = 'center';
+    /**
+     * Distance for slide animations (e.g. '100px')
+     */
+    distance = '50px';
+    /**
+     * Whether to reset the animation when the element leaves the viewport in reverse (scrolling up)
+     */
+    mirror = false;
+    /**
+     * Whether to disable animations for users who prefer reduced motion
+     */
+    respectReducedMotion = true;
+    /**
+     * Whether to scrub the animation based on scroll position (parallax effect)
+     */
+    scrub = false;
+    /**
+      * Emitted when the animation starts (element enters/interacts)
+      */
+    scrollAnimationStart;
+    /**
+      * Emitted when the animation ends
+      */
+    scrollAnimationEnd;
+    isVisible = false;
+    hasAnimated = false;
+    observer;
+    contentEl;
+    rafId;
+    animationTimer;
+    componentDidLoad() {
+        this.setupObserver();
+        if (this.scrub) {
+            this.startScrubLoop();
+        }
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+        }
+        clearTimeout(this.animationTimer);
+    }
+    headerScrubChange(newValue) {
+        if (newValue) {
+            this.startScrubLoop();
+        }
+        else {
+            if (this.rafId)
+                cancelAnimationFrame(this.rafId);
+            // Reset style override
+            if (this.contentEl) {
+                this.contentEl.style.removeProperty('--scroll-progress');
+            }
+        }
+    }
+    startScrubLoop() {
+        const loop = () => {
+            if (this.isVisible && this.contentEl) {
+                this.calculateScrollProgress();
+            }
+            this.rafId = requestAnimationFrame(loop);
+        };
+        loop();
+    }
+    currentProgress = 0;
+    targetProgress = 0;
+    calculateScrollProgress() {
+        // Determine the scroll progress of the element within the viewport
+        const anchorEl = this.anchor ? document.querySelector(this.anchor) || this.el : this.el;
+        const rect = anchorEl.getBoundingClientRect();
+        const windowHeight = window.innerHeight;
+        // Calculate progress: 0 when entering bottom, 1 when leaving top
+        const rawProgress = (windowHeight - rect.top) / (windowHeight + rect.height);
+        this.targetProgress = Math.max(0, Math.min(1, rawProgress));
+        // Smooth transition (Lerp)
+        this.currentProgress += (this.targetProgress - this.currentProgress) * 0.1;
+        if (this.contentEl) {
+            this.contentEl.style.setProperty('--scroll-progress', this.currentProgress.toFixed(4));
+        }
+    }
+    setupObserver() {
+        const options = {
+            root: this.root ? document.querySelector(this.root) : null,
+            rootMargin: this.rootMargin,
+            threshold: this.scrub ? 0 : this.threshold, // Scrub needs immediate detection
+        };
+        this.observer = new IntersectionObserver((entries) => {
+            // Respect user preference for reduced motion
+            const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+            if (this.respectReducedMotion && prefersReducedMotion) {
+                this.isVisible = true;
+                this.hasAnimated = true;
+                return;
+            }
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    // Element entered viewport
+                    if (!this.once || !this.hasAnimated) {
+                        this.isVisible = true;
+                        this.hasAnimated = true;
+                        this.scrollAnimationStart.emit();
+                        if (this.contentEl) {
+                            // Handle Staggering for children
+                            if (this.stagger > 0 && this.contentEl.children.length > 0) {
+                                Array.from(this.contentEl.children).forEach((child, index) => {
+                                    const htmlChild = child;
+                                    htmlChild.style.setProperty('--animation-delay', `${this.delay + (index * this.stagger)}ms`);
+                                    htmlChild.style.setProperty('--animation-duration', `${this.duration}ms`);
+                                    htmlChild.style.setProperty('--animation-easing', this.easing);
+                                    // Add classes to child
+                                    const enterClasses = this.enterClass.split(' ').filter(c => c.trim());
+                                    enterClasses.forEach(cls => child.classList.add(cls));
+                                    if (this.mirror) {
+                                        const leaveClasses = this.leaveClass.split(' ').filter(c => c.trim());
+                                        leaveClasses.forEach(cls => child.classList.remove(cls));
+                                    }
+                                });
+                            }
+                            else {
+                                // Normal single element behavior
+                                const enterClasses = this.enterClass.split(' ').filter(c => c.trim());
+                                enterClasses.forEach(cls => this.contentEl.classList.add(cls));
+                                if (this.leaveClass || this.mirror) {
+                                    const leaveClasses = this.leaveClass.split(' ').filter(c => c.trim());
+                                    leaveClasses.forEach(cls => this.contentEl.classList.remove(cls));
+                                }
+                            }
+                        }
+                        if (!this.scrub) {
+                            this.animationTimer = setTimeout(() => {
+                                this.scrollAnimationEnd.emit();
+                            }, this.duration + this.delay + (this.stagger * (this.contentEl ? this.contentEl.children.length : 0)));
+                        }
+                    }
+                    if (this.once) {
+                        this.observer.disconnect();
+                    }
+                }
+                else {
+                    // Element left viewport
+                    const rect = entry.boundingClientRect;
+                    const isBelow = rect.top > (window.innerHeight || document.documentElement.clientHeight);
+                    // If mirror is true and element is below viewport (scrolled up), reset it
+                    if (this.mirror && isBelow) {
+                        this.isVisible = false;
+                        this.hasAnimated = false; // Allow re-animating
+                        if (this.contentEl) {
+                            const enterClasses = this.enterClass.split(' ').filter(c => c.trim());
+                            enterClasses.forEach(cls => this.contentEl.classList.remove(cls));
+                            if (this.stagger > 0) {
+                                Array.from(this.contentEl.children).forEach((child) => {
+                                    enterClasses.forEach(cls => child.classList.remove(cls));
+                                });
+                            }
+                        }
+                    }
+                    else if (!this.once && this.isVisible) {
+                        this.isVisible = false;
+                        if (this.contentEl) {
+                            if (this.stagger > 0 && this.contentEl.children.length > 0) {
+                                Array.from(this.contentEl.children).forEach((child) => {
+                                    const leaveClasses = this.leaveClass.split(' ').filter(c => c.trim());
+                                    leaveClasses.forEach(cls => child.classList.add(cls));
+                                    const enterClasses = this.enterClass.split(' ').filter(c => c.trim());
+                                    enterClasses.forEach(cls => child.classList.remove(cls));
+                                });
+                            }
+                            else if (this.leaveClass) {
+                                const leaveClasses = this.leaveClass.split(' ').filter(c => c.trim());
+                                leaveClasses.forEach(cls => this.contentEl.classList.add(cls));
+                                const enterClasses = this.enterClass.split(' ').filter(c => c.trim());
+                                enterClasses.forEach(cls => this.contentEl.classList.remove(cls));
+                            }
+                        }
+                    }
+                }
+            });
+        }, options);
+        // Observe the content element or separate anchor
+        const target = this.anchor ? document.querySelector(this.anchor) : this.contentEl;
+        if (target) {
+            this.observer.observe(target);
+        }
+    }
+    render() {
+        const hostClass = this.scrub ? 'scrubbing' : '';
+        const blur = typeof this.blurAmount === 'string' ? this.blurAmount : '0px';
+        const perspective = typeof this.perspective === 'string' ? this.perspective : '1000px';
+        const distance = typeof this.distance === 'string' ? this.distance : '50px';
+        const origin = typeof this.transformOrigin === 'string' ? this.transformOrigin : 'center';
+        const easing = typeof this.easing === 'string' ? this.easing : 'ease';
+        return (h(Host, { key: '47a9d6b0f874f646bf3ba94faf32fbf958ceb177', class: hostClass }, h("div", { key: '4b44f83641692c3bdc3e4dad2ad7c3a25dfe5ac3', class: "animate-container", ref: el => this.contentEl = el, style: {
+                '--animation-duration': `${this.duration}ms`,
+                '--animation-delay': `${this.delay}ms`,
+                '--animation-easing': easing,
+                '--start-blur': blur || '0px',
+                '--perspective': perspective || '1000px',
+                '--distance': distance,
+                '--transform-origin': origin,
+                'perspective': perspective || 'none',
+                'transform-origin': origin
+            } }, h("slot", { key: '49dffe8ae575f94d9f94b9b0c076f88751e149c4' }))));
+    }
+    static get is() { return "ui-animate-on-scroll"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["animate-on-scroll.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["animate-on-scroll.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "enterClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AnimationEffect",
+                    "resolved": "\"bounce\" | \"expand\" | \"fade\" | \"fade-down\" | \"fade-in\" | \"fade-in-out\" | \"fade-left\" | \"fade-out\" | \"fade-right\" | \"fade-up\" | \"flip\" | \"flip-x\" | \"flip-y\" | \"float\" | \"none\" | \"pulse\" | \"ripple\" | \"rotate\" | \"scale\" | \"shake\" | \"shimmer\" | \"slide\" | \"slide-down\" | \"slide-in\" | \"slide-in-out\" | \"slide-left\" | \"slide-left-right\" | \"slide-out\" | \"slide-right\" | \"slide-up\" | \"slide-up-down\" | \"spin\" | \"spring\" | \"swing\" | \"wave\" | \"wobble\" | \"zoom\" | \"zoom-in\" | \"zoom-out\"",
+                    "references": {
+                        "AnimationEffect": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::AnimationEffect",
+                            "referenceLocation": "AnimationEffect"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS classes to apply when element enters viewport"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enter-class",
+                "defaultValue": "'fade-in'"
+            },
+            "leaveClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS classes to apply when element leaves viewport"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "leave-class",
+                "defaultValue": "''"
+            },
+            "threshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Threshold for intersection observer (0-1)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "threshold",
+                "defaultValue": "0.5"
+            },
+            "rootMargin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Root margin for intersection observer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "root-margin",
+                "defaultValue": "'0px'"
+            },
+            "once": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to animate only once or every time element enters viewport"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "once",
+                "defaultValue": "false"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation duration in milliseconds"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration",
+                "defaultValue": "1000"
+            },
+            "delay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation delay in milliseconds"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delay",
+                "defaultValue": "0"
+            },
+            "easing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation easing function"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "easing",
+                "defaultValue": "'ease'"
+            },
+            "anchor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS class or ID of the element to use as the scroll anchor"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor",
+                "defaultValue": "''"
+            },
+            "root": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selector for the root element (scroll container)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "root",
+                "defaultValue": "''"
+            },
+            "blurAmount": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Blur amount for starting state (e.g. '5px')\r\nRenamed from 'blur' to avoid conflict with HTMLElement.blur()"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "blur-amount",
+                "defaultValue": "''"
+            },
+            "perspective": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "3D Perspective value (e.g. '1000px')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "perspective",
+                "defaultValue": "''"
+            },
+            "stagger": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stagger delay per child in ms (if children exist)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stagger",
+                "defaultValue": "0"
+            },
+            "transformOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The transform origin for rotation/flip animations (e.g. 'top' or 'center')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "transform-origin",
+                "defaultValue": "'center'"
+            },
+            "distance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Distance for slide animations (e.g. '100px')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "distance",
+                "defaultValue": "'50px'"
+            },
+            "mirror": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to reset the animation when the element leaves the viewport in reverse (scrolling up)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mirror",
+                "defaultValue": "false"
+            },
+            "respectReducedMotion": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to disable animations for users who prefer reduced motion"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "respect-reduced-motion",
+                "defaultValue": "true"
+            },
+            "scrub": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to scrub the animation based on scroll position (parallax effect)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scrub",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {},
+            "hasAnimated": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "scrollAnimationStart",
+                "name": "scrollAnimationStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the animation starts (element enters/interacts)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "scrollAnimationEnd",
+                "name": "scrollAnimationEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the animation ends"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "scrub",
+                "methodName": "headerScrubChange"
+            }];
+    }
+}