giorgio23

Hi @philsbury ! Thank you very very much for your quick response! I worked on this now and this is exactly what I needed! everything is working as needed now! This is the code I ended up using.

<script>
document.addEventListener('DOMContentLoaded', 
function () {
    const textElements = [
        document.getElementById('fade-in-heading1'),
        document.getElementById('fade-in-heading2')
    ];
    const button = document.querySelector('.Elevatenow-homebutton');
    const slider = document.querySelector('.kb-blocks-bg-slider');
    const splideInstance = slider.splide;

    function instantVisualReset() {
        // Remove explicit background color setting
        document.body.style.opacity = '0';

        // Force GPU acceleration
        document.body.style.transform = 'translateZ(0)';

        // Reset slider and slides
        if (splideInstance && typeof splideInstance.go === 'function') {
            splideInstance.go(0);
            
            const slides = document.querySelectorAll('.splide__slide');
            slides.forEach((slide, index) => {
                slide.classList.remove('is-active');
                slide.style.opacity = '0';
                slide.style.visibility = 'hidden';
                
                if (index === 0) {
                    slide.classList.add('is-active');
                    slide.style.opacity = '1';
                    slide.style.visibility = 'visible';
                }
            });
        }

        // Reset animations for text and button
        [...textElements, button].forEach(element => {
            if (element) {
                element.style.animation = 'none';
                void element.offsetWidth; // Trigger reflow
                element.style.animation = 'fadeIn 2.3s ease forwards';
                element.style.animationDelay = '0s';
            }
        });
    }

    if (textElements && slider && button) {
        // Slide transition listener
        slider.addEventListener('transitionend', function () {
            const activeSlide = document.querySelector('.splide__slide.is-active');

            if (activeSlide) {
                // First slide handling
                if (activeSlide.id === 'splide01-slide01') {
                    button.style.animation = 'fadeIn 3s ease forwards';
                    button.style.animationDelay = '0s';
                    button.style.opacity = '1';
                    button.style.visibility = 'visible';
                }

                // Text element animations
                textElements.forEach(element => {
                    if (element) {
                        element.style.animation = activeSlide.id === 'splide01-slide01' 
                            ? 'fadeIn 2.3s ease forwards' 
                            : 'fadeOut 3s ease forwards';
                        element.style.animationDelay = '0s';
                    }
                });
            }
        });

        // Age Gate Hidden Event Handler
        window.addEventListener('age_gate_hidden', function () {
            // Instant visual reset
            instantVisualReset();

            // Optimized page reload
            setTimeout(() => {
                window.location.replace(window.location.href);
            }, 10);

            // Clear session data
            sessionStorage.clear();
            localStorage.setItem('firstVisit', 'true');
        });
    }
});

There’s still a split second flash I am trying to fix when you click yes on the agegate and you see the current slider image ( I have 7 that cycle at 7 second fade in/out intervals) so depending on when you click yes it shows that image for a split second. unfortunately the actual pause and resume did not work so I did it this way where it forces the page to reload from the beginning upon age gate becoming hidden.

• This reply was modified 1 year, 5 months ago by giorgio23.
• This reply was modified 1 year, 5 months ago by giorgio23.