wplit · January 26, 2026 00:06
diff --git a/footer-scripts.html b/footer-scripts.html
 <script>

 document.addEventListener('DOMContentLoaded', () => {
   
    const element = document.querySelector('.x-before-after'); /* change x-before-after for class of element */
    
    
        // Get the slider input
        const slider = element.querySelector('.x-before-after_slider');
        if (!slider) return;
        
        // Animation settings
        let animationId = null;
        let isUserControlled = false;
        let position = 50; // Start at middle (0-100)
        let direction = 1; // 1 = forward, -1 = backward
        const speed = 0.3; // Adjust speed (0.1 = slow, 1.0 = fast)
        
        // Animation loop
        function autoAnimate() {
            if (isUserControlled) return;
            
            // Update position
            position += speed * direction;
            
            // Reverse at boundaries
            if (position >= 100) {
                position = 100;
                direction = -1;
            } else if (position <= 0) {
                position = 0;
                direction = 1;
            }
            
            // Apply to element
            element.style.setProperty('--x-before-after-position', position + '%');
            slider.value = position;
            
            // Continue
            animationId = requestAnimationFrame(autoAnimate);
        }
        
        // Stop on user interaction
        function stopAnimation() {
            isUserControlled = true;
            if (animationId) cancelAnimationFrame(animationId);
        }
        
        slider.addEventListener('mousedown', stopAnimation);
        slider.addEventListener('touchstart', stopAnimation);
        slider.addEventListener('input', stopAnimation);
        element.addEventListener('mousedown', stopAnimation);
        
        // Start animation
        autoAnimate();
 });

 </script>
No results found