Cannot Pause My Animations and slider!

giorgio23
(@giorgio23)

2 months, 3 weeks ago

@philsbury

Thank you for the amazing plugin. I have configured everything to my liking and have the design etc. exactly how I want it.

My problem is happening with trying to “pause” a fade-in word animation and my slider of 6 background images on my first homepage.

I have tried with javascript code and css code to “pause” the fadein heading loading and the slider until the yes button is clicked with agegate.

I inspected the agegate and used the proper html i believe to target the yes button which then should load everything on the website as it does normally.

Once agegate is accepted and cached if i refresh the page everything loads normally and the timing is correct.

How can i pause my homepage animations until the yes button is clicked in agegate?

Thank you and sorry for my limited knowledge this is my first wordpress website

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author

Phil

(@philsbury)

2 months, 3 weeks ago

Hi @giorgio23,

There are javascript events fired when age gate shows and hides you could use rather than trying to target clicks.

When age gate shows:

window.addEventListener('age_gate_shown', function () {
  // Pause any animations
});

Then when it hides (is passed essentially)

window.addEventListener('age_gate_hidden', function () {
  // Restart your animation 
});

Hope that’s useful, I can’t really give you any pointers on how to pause or restart the elements – if they’re from a theme or plugin you might need to refer to their docs. If they’re custom, you should be able to restart anything fairly easily.

Thanks
Phil

Thread Starter

giorgio23

(@giorgio23)

2 months, 3 weeks ago

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 2 months, 3 weeks ago by giorgio23.
This reply was modified 2 months, 3 weeks ago by giorgio23.

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.